Question

我在制作带有两种颜色的正方形时遇到问题。我找到了函数createLinearGradient和addColorStop，但它只用一种颜色填充正方形，即蓝色。

我如何正确正确地填充此正方形？我在理解似乎函数的参数时遇到了麻烦。

var c = canvas.getContext('2d'); // context object

var grad = c.createLinearGradient(0, 0, 0, 100);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

// Fill a square:
c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);

Answer 1

fillStyles（例如渐变和图案）是相对于上下文矩阵绘制的，因此渐变实际上是在矩形上方绘制的：

var c = canvas.getContext('2d'); // context object
var grad = c.createLinearGradient(0, 0, 0, 100);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

c.fillStyle = grad;
// show the whole gradient
c.fillRect(0, 0, canvas.width, canvas.height);
// OP's square
c.strokeRect(100, 100, 100, 100);

<canvas id="canvas" height="300"></canvas>

要解决此问题，您有两种选择：

从一开始就正确设置渐变参数：

var c = canvas.getContext('2d');
// move the y1 and y2 values by 100
var grad = c.createLinearGradient(0, 100, 0, 200);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

// Fill a square:
c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);

<canvas id="canvas" height="300"></canvas>

在调用fill()之前转换上下文的矩阵。实际上，可以在单独的矩阵上完成路径绘制和填充。

var c = canvas.getContext('2d');
var grad = c.createLinearGradient(0, 0, 0, 100);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

c.fillStyle = grad;
// draw the path
c.rect(100, 100, 100, 100);
// change the filling matrix
c.translate(100, 100);
c.fill();

// reset the matrix
c.setTransform(1,0,0,1,0,0);

<canvas id="canvas" height="300"></canvas>

Answer 2

您install.packages("xcms")的值不在您绘制的矩形之内。

createLinearGradient

const canvas = document.getElementById('one');
const c = canvas.getContext('2d');
const grad = c.createLinearGradient(100, 100, 200, 200);
grad.addColorStop(0, "red");
grad.addColorStop(1, "blue");

c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);

canvas {
  outline: 1px solid black
}

画布-如何使用createLinearGradient（）用两种颜色填充正方形？

2 个答案: