必须先调用 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()，比事后排查快得多。