必须先调用 getContext(‘2d’) 获取绘图上下文才能绘图；直接在 canvas 元素上调用 fillRect 等方法会静默失败。
怎么获取 canvas 的 2D 绘图上下文
必须先拿到 getContext('2d') 才能画图，否则所有绘图方法都无效。常见错误是直接对 元素调用 fillRect 这类方法，结果静默失败。
正确做法：
- 确保 dom 已加载（比如在
window.onload或DOMContentLoaded里操作） - 用
document.getElementById()或其他选择器拿到 canvas 元素 - 立刻调用
.getContext('2d')，它返回一个绘图上下文对象，后续所有绘制都靠它
示例：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 必须这一步
ctx.fillRect(10, 10, 100, 50); // 现在才能画drawImage 方法的三个常用签名怎么选
drawImage 看似简单，但参数不同行为差异极大，容易画错位置、拉伸或裁剪出错。
三种调用方式对应不同场景：
-
drawImage(image, dx, dy)：最简形式，把整张图按原始尺寸画到画布上指定坐标 -
drawImage(image, dx, dy, dWidth, dHeight)：强制缩放到指定宽高，适合响应式适配 -
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：先从原图裁剪一块（sx/sy 起点 + 宽高），再缩放绘制到目标位置——常用于雪碧图或帧动画
注意：sx/sy 是源图坐标，不是画布坐标；dx/dy 才是画布上的落点。顺序记混就会图像偏移或空白。
fillStyle 和 strokeStyle 支持哪些值
这两个属性控制填充色和描边色，但不只接受十六进制字符串。
- 支持 css 颜色名：
ctx.fillStyle = 'red' - 支持十六进制：
'#ff0000'、'#f00' - 支持 rgb/rgba：
'rgb(255, 0, 0)'、'rgba(255, 0, 0, 0.5)'（透明度关键） - 支持渐变对象：
createLinearGradient()或createRadialGradient()返回值 - 支持图案：
createPattern()返回值
常见坑：fillStyle = '#fff' 写成 fillStyle = '#ffffff' 没问题，但写成 fillStyle = 'white' 在某些旧环境可能不识别；用 rgba 时 alpha 为 0 会完全不可见，调试时容易误以为没画出来。
clearRect 和 fillRect 容易混淆的用途
clearRect 不是“清空整个 canvas”，而是“清除指定矩形区域”，且它只擦除像素，不影响后续绘图状态（如 fillStyle、lineWidth）。
-
clearRect(0, 0, canvas.width, canvas.height)是清全屏的标准写法 -
fillRect是绘制实心矩形，颜色由当前fillStyle决定；如果想“覆盖旧内容”，得自己设好颜色再填满，不能指望它自动清屏 - 动画中频繁清屏时，
clearRect比重绘整个背景更快更轻量
特别注意：canvas 的坐标系原点在左上角，y 向下增长，所以 clearRect(0, 0, 100, 100) 清的是左上角那块，不是右下角。
canvas 绘图真正难的不是语法，而是状态管理——save()/restore()、变换矩阵、路径复用这些细节一旦漏掉，图形就莫名偏移或颜色错乱。初学建议每画一组东西前先 ctx.save()，画完立刻 ctx.restore()，比事后排查快得多。