JavaScript 中 Canvas 怎么实现颜色渐变填充-js教程-PHP中文网

canvas中实现颜色渐变填充需先用createlineargradient或createradialgradient创建渐变对象，再通过addcolorstop添加色标，赋给fillstyle后调用fillrect或fill等绘图方法即可完成线性、径向或路径渐变填充。

javascript 中 canvas 怎么实现颜色渐变填充

Canvas 中实现颜色渐变填充，核心是使用 createLinearGradient 或 createRadialGradient 创建渐变对象，再将其赋给 fillStyle，最后调用绘图方法（如 fillRect、fill）即可。

线性渐变：从左到右、上到下等方向过渡

线性渐变按指定起点和终点连线方向平滑过渡颜色。关键参数是起点坐标 (x1, y1) 和终点坐标 (x2, y2)：

从左到右：用 ctx.createLinearGradient(0, 0, width, 0)
从上到下：用 ctx.createLinearGradient(0, 0, 0, height)
对角线（左上→右下）：用 ctx.createLinearGradient(0, 0, width, height)

创建后需用 addColorStop(offset, color) 添加至少两个色标（offset 是 0–1 之间的归一化位置，例如 0 表示起点，0.5 表示中点，1 表示终点）：

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#ff9a9e');   // 左端：浅粉
gradient.addColorStop(1, '#fad0c4');   // 右端：米橘
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 100);

径向渐变：以圆心为中心向外扩散

适合圆形、球体或聚焦效果。需指定两个圆：起始圆 (x1, y1, r1) 和结束圆 (x2, y2, r2)，两圆中心可不同（实现偏移光效）：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

标准同心圆：两圆圆心相同，半径不同，如 createRadialGradient(100, 100, 0, 100, 100, 80)
模拟高光：小起始圆在左上，大结束圆覆盖整个区域，产生亮斑感

同样需用 addColorStop 设置颜色节点：

const radial = ctx.createRadialGradient(50, 50, 0, 50, 50, 60);
radial.addColorStop(0, '#fff');
radial.addColorStop(1, '#666');
ctx.fillStyle = radial;
ctx.beginPath();
ctx.arc(50, 50, 60, 0, Math.PI * 2);
ctx.fill();

渐变填充路径（不规则形状）

只要先用 beginPath() + 路径方法（moveTo、lineTo、arc 等）定义好路径，再设置 fillStyle 为渐变对象，调用 fill() 即可填充任意闭合图形：

确保路径已闭合（显式 closePath() 或自动闭合如 arc）
渐变坐标系基于 Canvas 原点（左上角），不受当前变换影响（除非你主动对 canvas 应用了 transform）
若想让渐变随图形“贴合”，需按图形尺寸动态计算渐变坐标

例如绘制一个带渐变的三角形：

ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(90, 90);
ctx.lineTo(10, 90);
ctx.closePath();
<p>const triGrad = ctx.createLinearGradient(10, 50, 90, 50);
triGrad.addColorStop(0, 'gold');
triGrad.addColorStop(1, 'orange');
ctx.fillStyle = triGrad;
ctx.fill();</p>