canvas线性渐变通过createlineargradient(x0,y0,x1,y1)定义方向轴线，再用addcolorstop(offset,color)添加至少两个色标（offset∈[0,1]），最后赋给fillstyle/strokestyle并绘图生效；渐变按图形边界自动缩放，超出部分以最近色标延伸。
Canvas线性渐变通过 createLinearGradient() 方法创建，本质是定义一条渐变轴线（起点到终点），再沿该轴线填充颜色过渡。
基础用法：定义渐变轴线
语法为：ctx.createLinearGradient(x0, y0, x1, y1)，其中 (x0, y0) 是起点坐标，(x1, y1) 是终点坐标——注意：这两点定义的是**方向与长度**，不是必须在画布内，也不限制方向（水平、垂直、斜向均可）。
- 水平渐变：如
createLinearGradient(0, 0, 300, 0)表示从左（x=0）到右（x=300）的水平轴线 - 垂直渐变：如
createLinearGradient(0, 0, 0, 200)表示从上（y=0）到下（y=200） - 对角渐变：如
createLinearGradient(0, 0, 400, 300)表示从左上到右下
添加颜色停止点（addColorStop）
创建渐变对象后，需用 addColorStop(offset, color) 添加至少两个色标。offset 是 0.0～1.0 的归一化位置值（0=起点，1=终点），color 支持所有 CSS 颜色格式（如 "#ff0"、"rgba(255,0,0,0.5)"、"hsl(120,100%,50%)"）。
- 必须添加至少两个 stop，否则渲染无效
- offset 可重复或乱序，但浏览器按 offset 升序插值；建议从小到大添加
- 例如：
grad.addColorStop(0, "red"); grad.addColorStop(1, "blue");
应用渐变：赋值给 fillStyle 或 strokeStyle
渐变对象本身不绘制，需赋给 ctx.fillStyle（填充）或 ctx.strokeStyle（描边），再调用绘图方法（如 fillRect()、fill()、stroke()）才会生效。
- 渐变会自动映射到图形边界：矩形用其自身宽高拉伸渐变轴线，路径则按包围盒（bounding box）缩放对齐
- 若图形超出渐变轴线范围，超出部分按最近色标颜色延伸（非重复）
- 示例：
ctx.fillStyle = grad; ctx.fillRect(10, 10, 200, 100);
常见细节与注意事项
线性渐变行为依赖坐标系，而 Canvas 坐标原点在左上角，Y 轴向下增长——这点影响垂直/斜向渐变的方向理解。
- 渐变对象是独立于 canvas 状态的 JS 对象，可复用、缓存，也可动态修改（但需重新赋值并重绘）
- 渐变不受
transform影响（即 scale/rotate 不改变渐变方向），但可通过调整 x0/y0/x1/y1 实现等效效果 - 透明度应写在 color 字符串中（如
"rgba(255,0,0,0.3)"），不能单独设 globalAlpha - 移动端 Safari 和旧版 Android 浏览器对超大 offset（>1 或
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
