如何使用HTML canvas实现渐变色的填充效果？

本文共计1009个文字，预计阅读时间需要5分钟。

在 `fillStyle` 属性中，必须设置为 `createLinearGradient()` 或 `createRadialGradient()` 返回的对象，字符串色值、数组色值、或由逗号分隔的色值。例如：

createLinearGradient() 的坐标不是百分比，是绝对像素点

四个参数 (x0, y0, x1, y1) 是画布坐标系中的点，不是宽高比例，也不是 CSS 百分比。写成 createLinearGradient("0%", "0%", "100%", "0") 会直接报错；写成 createLinearGradient(0, 0, canvas.width, 0) 才是从左到右铺满画布宽度的水平渐变。

常见错误：

• 起点终点重合（x0 === x1 && y0 === y1），导致渐变退化为单色
• 误用 canvas.clientWidth 或缩放后尺寸，而没用 canvas.width/canvas.height（后者才是绘图坐标系基准）
• 在 transform 缩放后仍按原始坐标算轴线，结果方向偏移

addColorStop() 的 offset 必须是 0–1 的数字，不能是字符串

offset 参数只接受 number 类型，范围严格在 [0, 1] 内。