将 linearGradient 分配给 canvas 背景色

Question

我创建了一个渐变，并希望将其作为 canvas 的背景色，但 canvas 无法使用它。然而，我为确保渐变的有效性而绘制的矩形工作得很好。这里有什么问题，你能不能简单地让背景颜色不渐变？

我是否必须求助于在整个 canvas 上绘制一个矩形？

<!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, 0, canvas.width, canvas.height);
        gradient.addColorStop(0, "rgb(255, 255, 255)");
        gradient.addColorStop(1, "rgb(0, 0, 0)");

        canvas.style.backgroundColor = gradient;


        ctx.beginPath();
        ctx.rect(20, 20, 1000, 1000);
        ctx.fillStyle = gradient;
        ctx.fill();

    }

    window.onload = init();
</script>

</html>

Answer 1

您将 CSS 样式渐变与 canvas 渐变混合，它们是两种不同的东西：

您可以通过两种方式执行相同的线性渐变技巧，绘制一个与 canvas 全尺寸相同的矩形或通过 css 应用渐变，下面是您可以选择自己喜欢的示例。

我在 canvas

中添加了一些圆圈和线条以显示更多内容

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function drawBackground() {
  var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop(0, "rgb(255, 255, 255)");
  gradient.addColorStop(1, "rgb(0, 0, 0)");

  ctx.rect(0, 0, canvas.width, 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, 0, 8);
    ctx.stroke()
  }
}

function drawLines() {
  for (var i = 1; i < 8; i++)
    ctx.lineTo(i ** 3, i * 20, 10, 0, 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, i * 8, 10, 0, 8);
    ctx.stroke()
  }
}

function drawLines() {
  for (var i = 1; i < 8; i++)
    ctx.lineTo(i ** 3, i * 20, 10, 0, 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>

将 linearGradient 分配给 canvas 背景色

Assign a linearGradient to a canvas background color

javascript

html

html5-canvas

background-color

linear-gradients