javascript - Canvas - 如何使用 createLinearGradient() 用两种颜色填充正方形？

Question

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

我该如何正确填充这个方 block ？我似乎无法理解该函数的参数。

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>