如何解决为画布背景色分配一个 linearGradient
我创建了一个渐变,并希望将其设置为画布的背景颜色,但画布无法使用它。然而,我为确保渐变的有效性而绘制的矩形效果很好。 这里有什么问题,您不能简单地将背景颜色设为渐变吗?
我是否必须求助于在整个画布上绘制一个矩形?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var gradient;
function init() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
gradient = ctx.createLinearGradient(0,canvas.width,canvas.height);
gradient.addColorStop(0,"rgb(255,255,255)");
gradient.addColorStop(1,"rgb(0,0)");
canvas.style.backgroundColor = gradient;
ctx.beginPath();
ctx.rect(20,20,1000,1000);
ctx.fillStyle = gradient;
ctx.fill();
}
window.onload = init();
</script>
</html>
解决方法
您将 CSS 样式渐变与画布渐变混合在一起,它们是两种不同的东西:
- https://www.w3schools.com/css/css3_gradients.asp
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
您可以在两种方式下使用相同的线性渐变技巧,绘制一个与画布全尺寸相同的矩形或通过 css 应用渐变,下面是示例,您只需选择您最喜欢的即可。
我添加了一些圆圈和线条以在画布中显示更多内容
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function drawBackground() {
var gradient = ctx.createLinearGradient(0,canvas.width,0);
gradient.addColorStop(0,"rgb(255,255,255)");
gradient.addColorStop(1,"rgb(0,0)");
ctx.rect(0,canvas.height);
ctx.fillStyle = gradient;
ctx.fill()
}
function drawCircles() {
for (var i = 2; i < 8; i++) {
ctx.beginPath();
ctx.arc(i * 30,i * 8,10,8);
ctx.stroke()
}
}
function drawLines() {
for (var i = 1; i < 8; i++)
ctx.lineTo(i ** 3,i * 20,8);
ctx.stroke()
}
function init() {
drawBackground()
drawCircles()
drawLines()
}
window.onload = init();
<canvas id="canvas" width=400 height=150></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function drawCircles() {
for (var i = 2; i < 8; i++) {
ctx.beginPath();
ctx.arc(i * 30,8);
ctx.stroke()
}
function init() {
drawCircles()
drawLines()
}
window.onload = init();
canvas {
background-image: linear-gradient(to right,white,black);
}
<canvas id="canvas" width=400 height=150></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。