如何利用HTML的canvas的createLinearGradient创建线性渐变填充-html教程-PHP中文网

createlineargradient(x0,y0,x1,y1)参数按起点x、y和终点x、y顺序定义渐变轴线，坐标系以canvas左上角为原点；addcolorstop的offset必须为0–1间的归一化值，非像素单位。

如何利用html的canvas的createlineargradient创建线性渐变填充

createLinearGradient 的参数顺序和坐标系怎么理解

canvas 的 createLinearGradient 接收 4 个参数：x0, y0, x1, y1，代表渐变起点和终点的坐标。关键点在于：这些坐标是相对于当前 canvas 坐标系（左上角为原点），不是相对于绘制图形本身。比如你画一个矩形在 (100, 50)，但传给 createLinearGradient 的 (0, 0, 0, 100) 仍是从 canvas 左上角开始算起——不是从矩形左上角。

常见错误是误以为参数以图形为基准，结果渐变“飘走”或完全不可见。建议先用 strokeRect(0, 0, 200, 200) 搭建参考框，再叠加渐变填充观察效果。

(0, 0, 100, 0) → 水平从左到右渐变
(0, 0, 0, 100) → 垂直从上到下渐变
(0, 0, 100, 100) → 对角线渐变（左上→右下）

addColorStop 的 offset 值必须在 0–1 范围内

addColorStop 的第一个参数是 offset，它表示颜色在渐变轴上的相对位置，0 是起点，1 是终点。超出范围（如 -0.1 或 1.5）会直接报错：IndexSizeError: The index is not in the allowed range.

注意：这个 offset 不是像素值，也不受 canvas 缩放、transform 影响；它只和你定义的那条渐变线段（x0,y0 → x1,y1）有关。即使你画的图形很小，只要渐变线足够长，颜色依然按比例分布。

两个色停点就用 0 和 1 最稳妥
想强调中间色，可以加 0.5，但别写成 50 或 0.5px
重复添加相同 offset 不会覆盖，而是按调用顺序叠加（但浏览器通常只取最后一个）

fillStyle 必须在 beginPath 之后、fill/stroke 之前赋值

渐变对象要通过赋值给 fillStyle 才生效，但时机很关键：必须在调用 fill() 或 stroke() 之前设置，且最好在 beginPath() 之后。如果提前设了 fillStyle，又执行了其他路径操作（比如 arc() 后跟 rect()），而没重设 fillStyle，后一个图形仍会沿用之前的渐变——这不一定是 bug，但容易误判为“渐变没生效”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

典型错误写法：ctx.fillStyle = gradient; ctx.fillRect(0,0,100,100); ctx.beginPath(); ctx.arc(50,50,30,0,Math.PI*2); ctx.fill(); —— 圆也会被同个渐变填充，除非你中间重新赋值 fillStyle。

每次绘制新图形前，显式设置 fillStyle 更安全
渐变对象可复用，但不要假设“设一次管全场”
调试时临时换成纯色（如 'red'）能快速判断是渐变逻辑问题还是路径/绘制顺序问题

高 DPI 屏幕下渐变可能模糊？注意 canvas 的实际渲染尺寸

在 Retina 或 Windows 高缩放屏上，如果只设置 canvas 的 CSS 宽高（如 style="width:300px;height:150px"），但没设置 width 和 height 属性，canvas 会用默认 300×150 像素缓冲区渲染，再被拉伸，导致渐变边缘发虚甚至断层。

解决方法是显式设置 canvas 元素的 width 和 height 属性，并根据 window.devicePixelRatio 缩放：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
canvas.width = 300 * dpr;
canvas.height = 150 * dpr;
canvas.style.width = '300px';
canvas.style.height = '150px';
ctx.scale(dpr, dpr);

否则，哪怕 createLinearGradient 参数完全正确，渐变在视觉上也会失真——这不是渐变函数的问题，是像素对齐没做好。