Canvas适合像素级高频重绘，SVG适合矢量交互与DOM操作；fillStyle/strokeStyle是上下文状态，影响后续绘制直至重设；SVG路径需注意命令大小写与控制点；Canvas动画须用逻辑尺寸clearRect，避免CSS缩放导致残影。
Canvas 和 SVG 不是“选哪个更好”的问题，而是“哪个更合适当前需求”的问题。Canvas 适合像素级控制、高频重绘（如游戏、实时图表）；SVG 适合矢量图形、需要事件交互或 DOM 操作的场景（如地图图层、可访问性要求高的图标）。盲目用 Canvas 画按钮，或用 SVG 渲染 10 万粒子，都会踩坑。
Canvas 绘制矩形和文字时，fillStyle 和 strokeStyle 的作用范围
这两个属性不是“一次性设置后永久生效”，而是影响后续所有 fill() 或 stroke() 调用，直到被再次修改。常见错误是：在循环中反复设置颜色却没意识到它会持续生效，导致意外着色。
-
fillStyle控制fillRect()、fill()（路径填充）的颜色或渐变 -
strokeStyle控制strokeRect()、stroke()（描边）的颜色或渐变 - 它们不继承自父元素，Canvas 是状态机，每次绘制都依赖当前上下文状态
- 若需局部复位，可用
ctx.save()/ctx.restore()，但别滥用——性能开销明显
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50); // 红色
ctx.fillStyle = 'blue';
ctx.fillRect(70, 10, 50, 50); // 蓝色
// 中间没改 fillStyle，下一个 fillRect 仍是蓝色
ctx.fillRect(130, 10, 50, 50); // 还是蓝色
SVG 中用
d 属性是 SVG 最灵活也最容易出错的部分。M、L、C、Q、Z 等命令大小写含义不同（大写绝对坐标，小写相对坐标），而贝塞尔控制点位置不对，曲线就会“飞出去”或完全不可见。
-
C x1 y1, x2 y2, x y：三次贝塞尔，(x1,y1)是起点控制点，(x2,y2)是终点控制点，(x,y)是终点 -
Q x1 y1, x y：二次贝塞尔，(x1,y1)是唯一控制点，(x,y)是终点 -
浏览器开发者工具里无法直接编辑
d字符串并实时预览——建议先用在线工具（如 SVG Path Builder）生成再复制 - 给
stroke="black" fill="none"可快速验证路径是否绘制成功
Canvas 动画卡顿？检查是否在 requestAnimationFrame 中重复调用 clearRect()
Canvas 不自动清屏，动画每一帧必须显式清除上一帧内容。用 clearRect(0, 0, canvas.width, canvas.height) 是最常用方式，但要注意：如果 canvas 尺寸被 CSS 缩放（例如 style="width: 100%; height: 100%;"），canvas.width 和 canvas.height 是逻辑像素，而 CSS 设置的是渲染尺寸——此时 clearRect 会清错区域，残留残影或闪烁。
立即学习“Java免费学习笔记（深入）”；
- 始终用 canvas 元素的
width和height属性值（非 CSS 样式）作为clearRect参数 - 避免在循环中反复读取
canvas.width，可缓存为变量 - 若需高 DPI 支持（如 Retina 屏），需按
window.devicePixelRatio缩放 canvas 内部尺寸，并用transform补偿 - 不要用
ctx.clearRect()+ctx.drawImage(canvas, 0, 0)实现“擦除保留背景”——这本质是双缓冲，但性能极差
真正难的不是画出一个圆，而是当图形要响应鼠标拖拽、缩放、导出高清 PNG、适配暗色模式、支持键盘焦点和屏幕阅读器时，Canvas 和 SVG 的技术债立刻显现。这时候回过头看：Canvas 里模拟 SVG 的事件系统有多脆弱，SVG 里硬塞 Canvas 粒子又多难维护——选择本身，就是设计决策的开始。
