时间戳

首页 > 解决方案 > Canvas - 如何使用 createLinearGradient() 用两种颜色填充正方形？

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

问题描述

我在制作一个有两种颜色的正方形时遇到问题。我找到了函数 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);

标签： javascripthtmlcanvas

解决方案

填充样式，如渐变和图案是相对于上下文的矩阵绘制的，所以你的渐变实际上是在你的矩形上方绘制的：

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>

推荐阅读