深入理解canvas画布渐变之：线性渐变

马黑黑 · 发表于 2022-8-19 07:48

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

深入理解canvas画布渐变之：线性渐变 | 马黑黑

canvas 画布支持 gradient 渐变，其中的线性渐变对应于 CSS 的 linear-gradient。在画布中使用线性渐变，首先需要通过JS的方法创建渐变（假设画笔句柄为 ctx）：

ctx.createLinearGradient(x1,y1,y1,y2);

以上 createLinearGradient 方法就是在画布上创建渐变蓝图，请特别留意 createLinearGradient 的大小写书写格式。创建线性渐变需要四个参数，x1是渐变开始的x坐标、x2是渐变结束的x坐标，y1是渐变开始的y坐标、y2是渐变结束的y坐标。

比如，我们在一个 400*400 的画布上这么定义一个线性渐变区域：

let gradient = ctx.createLinearGradient(0, 0, 400, 400);

这将令渐变从画布的左上角发起，到右下角结束。如果有两种颜色参与渐变，则第一个颜色在左上角区域，第二个颜色在右下角区域，二者的中间地带是两种颜色的交融，以线性的形式从左上到右下逐渐过渡。

就是说，渐变的方向是：{x1,y1} → {x2,y2}，两两设定好前后参数，就可以设定我们所需要的线性渐变方向和渐变范围。再举几个例子：

(400, 0, 0, 400) ：右上 → 左下
(400, 400, 0, 0) ：右下 → 左上
(0, 400, 400, 0) ：左下 → 右上
(0, 0, 400, 0) ：左 → 右
(400, 0, 0, 0) ：右 → 左
(0, 0, 0, 400) ：上 → 下
(0, 400, 0, 0) ：下 → 上

说明：以上参数不支持百分比。开始与结束xy坐标如果不能涵盖整个画布，则画布的渐变范围不是全幅的。

以上，我们用 createLinearGradient 建立了画布上的线性渐变方案，但还没有设定参与渐变的颜色。我们知道，渐变需要至少两种颜色，添加颜色的命令是（同样地请特别留意大小写书写格式）：

addColorStop(position,color)

addColorStop 字面意是添加结束颜色，带两个必须的参数：position是位置，取值从 0 到 1（含0和1），支持小数点，不支持百分比；color是颜色，使用时颜色要放在小角引号里。是谁要添加颜色呢？当然是渐变，比如加到前面声明的 gradient 变量：

gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');

这样，我们就给 gradient 渐变方案添加了两中颜色，红色和绿色，红色位置参数为0，绿色位置参数为1，两种颜色按内置的渐变算法融合过渡。颜色的位置参数含义不是很好理解，它表示指定颜色参与渐变的结束点——这一点我们可以这样验证：将红色的位置参数改为0.4，绿色的位置参数改为0.6，则可发现在画布的40%到60%之间是两种颜色的渐变区域，其中40%处是红色参与渐变结束线，60%是绿色参与渐变的结束线（它的结束点是）。从中可知，两种颜色的结束点方向都是自里往外，往自己的出发点方向；再进一步修改位置参数，两者都用0.5，这回发现，两种颜色泾渭分明、没有渐变区域，这是因为两种颜色参与渐变的终止点重合在了50%处。

当需要多种颜色参与渐变，只需继续按如上方式添加N种颜色便可。各颜色间的位置参数从0到1均匀分配或按需要设置好其值。

最后，将渐变设定赋值给画笔的绘制方式，即 fillStyle 或 strokeStyle，就可以在画布上绘制有渐变效果的图形或文本了：

ctx.fillStyle = gradient;

让我们画个全幅矩形：

ctx.fillRect(0, 0, 400, 400);
ctx.fill();

或写一行文本：

ctx.font = 'bold 40px sans-serif'; //设置字体
ctx.strokeStyle = gradient;
ctx.strokeText('天下谁人不识君？', 40, 200);

附：绘制渐变矩形完整代码

<canvas id="canv" width="400" height="400"></canvas>

<script>

let ctx = canv.getContext('2d');
let gradient = ctx.createLinearGradient(0, 0, 400, 400);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canv.width, canv.height);

</script>