Canvas需设HTML width/height属性而非仅CSS，否则图形拉伸；绘图前须设置fillStyle/strokeStyle等样式；arc角度单位为弧度；drawImage前需确保图片onload完成；绘图后需clearRect清屏。
Canvas 是一个 HTML 元素，本身不绘图，只有拿到它的 getContext('2d') 才能真正开始画。
Canvas 元素必须有 width/height 属性，不能只靠 CSS 控制尺寸
很多人用 CSS 设置 canvas 宽高，结果图形被拉伸、模糊或只显示左上角一小块——这是因为 Canvas 的「绘图坐标系」由 HTML 属性 width 和 height 决定，CSS 只控制显示大小。两者不一致时，浏览器会缩放整个位图。
- 正确写法：
- 错误写法：
（没设 HTML 属性） - 若需响应式，JS 中同步修改
canvas.width和canvas.height，再重绘
fillRect、strokeRect、arc 这些基础绘图方法要先设置样式再调用
Canvas 没有“对象模型”，所有绘制都依赖当前上下文状态。比如没调 ctx.fillStyle 就调 fillRect()，会用默认黑色；没设 ctx.strokeStyle 和 ctx.lineWidth 就调 strokeRect()，可能看不见边框。
-
ctx.fillStyle = '#f00'影响后续所有fill*操作 -
ctx.strokeStyle = 'rgba(0,0,0,0.7)'+ctx.lineWidth = 2才能让strokeRect()显得清晰 -
arc(x, y, radius, startAngle, endAngle)的角度单位是弧度，不是度数：用Math.PI / 180转换，或直接写Math.PI * 1.5
drawImage 绘制图像前，必须确保图片已加载完成
直接把 new Image() 丢给 drawImage()，大概率什么也不出现——因为图片还在网络加载中，drawImage 不会等它。
- 必须监听
img.onload回调，在里面调用drawImage() - 如果图来自 URL，注意跨域问题：
img.crossOrigin = 'anonymous'，否则toDataURL()或读取像素会报错SecurityError - 三种调用形式：
drawImage(img, dx, dy)、drawImage(img, dx, dy, dWidth, dHeight)、drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，最后一种可做裁剪+缩放
最常被忽略的是：Canvas 绘图后不会自动“记住”你画了什么。清屏只能靠 clearRect() 或重置 canvas 大小，动画里漏掉这步，就会残留上一帧内容。
