Canvas中createLinearGradient画不出渐变，主因是坐标系理解错误、变换干扰、色标offset超范围（须0–1）、未适配devicePixelRatio及resize后未更新渐变坐标。
canvas 里 createLinearGradient 画不出渐变？先看坐标系是否搞反了
Canvas 的渐变不是“从颜色 A 到颜色 B”就完事，它严格依赖起点 (x0, y0) 和终点 (x1, y1) 构成的线段方向。常见错误是以为 createLinearGradient(0, 0, 100, 0) 就是“从左到右”，但实际效果取决于你 fillRect 的位置和 canvas 坐标系原点（左上角）。如果画布没重置、或用 transform 移动过，起点/终点坐标可能被意外偏移。
- 始终用绝对像素坐标（比如
0, 0, canvas.width, 0表示横向全宽渐变） - 避免在调用
createLinearGradient前使用ctx.save()/ctx.translate()等变换，除非你明确知道它们会影响渐变线段坐标 - 调试时可临时用
ctx.strokeStyle = 'red'; ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.stroke();画出渐变轴线，确认方向是否符合预期
添加多个色标必须用 addColorStop，且 offset 必须在 0–1 范围内
addColorStop 的第一个参数是归一化偏移量（0.0 到 1.0），不是像素值。很多人写成 grad.addColorStop(50, '#f00') 或 grad.addColorStop(-0.1, '#000')，结果静默失败——浏览器不会报错，但该色标直接被忽略，导致渐变断层或单色填充。
- 色标顺序不强制按 offset 升序，但建议保持，否则渲染行为可能因浏览器而异
- 至少要加两个色标（
0和1），否则渐变无效 - 可以重复使用同一 offset（比如模拟硬边过渡：
addColorStop(0.5, '#f00'); addColorStop(0.5, '#00f');）
const grad = ctx.createLinearGradient(0, 0, 200, 0); grad.addColorStop(0, '#ff9a9e'); // 左端 grad.addColorStop(0.5, '#fad0c4'); // 中间 grad.addColorStop(1, '#a1c4fd'); // 右端 ctx.fillStyle = grad; ctx.fillRect(0, 0, 200, 100);
渐变对象不能复用？其实是能的，但要注意 fillStyle 的赋值时机
createLinearGradient 返回的是一个 CanvasGradient 对象，它本身不绑定画布尺寸或绘制内容，只要坐标逻辑合理，完全可以复用。问题常出在：你在 canvas resize 后没更新渐变坐标，却还用旧的 grad 对象，导致渐变拉伸变形或偏移。
- 如果 canvas 尺寸会变（如响应式布局），每次重绘前应重新创建渐变，或封装成函数动态计算
(x0,y0,x1,y1) - 不要把
ctx.fillStyle = grad写在初始化阶段，而应在每次绘制前设置，避免因上下文状态残留导致意外覆盖 - 渐变对象没有「销毁」概念，也不需要手动释放，但大量动态创建时注意别在闭包中意外持有 canvas 引用造成内存泄漏
移动端 Safari 或老版 Chrome 渐变失效？检查 CSS transform 和 devicePixelRatio
某些 iOS Safari 版本对带 transform: scale() 的 canvas 容器中渲染渐变有 bug；更常见的是高 DPI 设备（如 Retina 屏）下，若 canvas 的 width/height 属性没按 devicePixelRatio 缩放，而 CSS 样式又设置了 width: 100%; height: 100%，会导致渐变坐标被拉伸，看起来像“只显示一半”或“颜色挤在一起”。
立即学习“前端免费学习笔记（深入）”；
- 务必显式设置 canvas 元素的
width和height属性（不是 CSS 样式），并乘以window.devicePixelRatio - 避免对 canvas 父容器使用
transform，改用position+top/left控制位置 - 测试时用
console.log(ctx.fillStyle)看是否仍为 CanvasGradient 实例，排除被意外覆盖成字符串颜色的可能
addColorStop 不代表能稳定出图。 
