Canvas无背景色渐变属性，需用createLinearGradient或createRadialGradient创建渐变对象并fillRect全画布；线性渐变适合通栏背景，径向渐变适用于光效焦点；注意文字对比度、抗锯齿、高清屏适配及离屏优化。
Canvas 本身没有“背景色渐变”这个现成属性，得靠 createLinearGradient() 或 createRadialGradient() 手动创建渐变对象，再赋给 fillStyle 去填充整个画布区域。关键不是“设背景”，而是“画一个覆盖全画布的渐变矩形”。
用线性渐变填满画布
这是最常用的方式，适合做从上到下、左到右的通栏渐变背景：
- 先调用
ctx.createLinearGradient(x0, y0, x1, y1)，四个参数是渐变起止点坐标；比如从左上角到右下角就写(0, 0, canvas.width, canvas.height) - 用
addColorStop(位置, 颜色)至少加两个色标，位置用 0–1 的小数（如0、0.5、1），别用百分比字符串 - 把生成的渐变对象赋给
ctx.fillStyle，再用ctx.fillRect(0, 0, canvas.width, canvas.height)一次性铺满
用径向渐变模拟中心光效
适合科技感、卡片浮层或头像遮罩类场景，突出视觉焦点：
- 调用
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)，前三个是内圆（通常半径设为 0），后三个是外圆；圆心建议用绝对像素值（如canvas.width/2, canvas.height/2），比百分比更稳 - 如果想让光晕柔和扩散，外圆半径
r1可设为画布对角线长度的一半，或略大些（如Math.sqrt(canvas.width**2 + canvas.height**2) / 1.5） - 同样赋给
fillStyle后 fillRect 即可；若需叠加在已有内容上，记得先save()、绘制后再restore()
避免常见视觉翻车点
渐变背景容易让文字看不清，或边缘发虚，这些细节直接影响观感：
立即学习“前端免费学习笔记（深入）”；
- 文字叠加时别只设黑或白——用 Chrome DevTools 的「Contrast」工具点选文字区域，实时测对比度是否 ≥4.5（AA 标准）
- Canvas 渲染默认有抗锯齿，如果渐变边缘出现模糊，可在绘制前加
ctx.imageSmoothingEnabled = false（仅适用于硬边需求） - 全屏 Canvas 要适配高清屏：设置
canvas.width = window.innerWidth * window.devicePixelRatio并同步缩放 CSS 尺寸，否则渐变会拉伸失真
结合粒子或线条增强层次
纯渐变背景略显单薄，加一点动态元素立刻升级：
- 在渐变背景之上，用
requestAnimationFrame绘制粒子系统，粒子颜色可取自渐变主色并微调 HSL 色相，保持色调统一 - 添加细连线效果时，把连线的
strokeStyle设为透明度极低的白色（如rgba(255,255,255,0.1)），再配合shadowBlur加柔光，能自然融入渐变底色 - 不想每帧重绘整张渐变？可离屏绘制一次（用另一个
offscreenCanvas先画好渐变），后续直接drawImage复用，省性能
