Canvas.getContext('2d') 是唯一绘图入口，漏调用则所有绘图方法报错；需先获取上下文对象才能调用 fillRect、arc 等方法，并注意路径管理、状态机特性及图片加载完成后再绘制。
Canvas.getContext('2d') 是唯一入口，不调用它所有绘图都无效
Canvas 元素本身只是个容器，真正绘图能力来自 getContext('2d') 返回的 2D 渲染上下文对象。漏掉这步，fillRect、strokeCircle（不存在！）等方法全会报 undefined is not a function 错误。
常见错误写法：
const canvas = document.getElementById('myCanvas');
canvas.fillRect(0, 0, 100, 100); // ❌ 报错：fillRect is not a function
正确写法：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // ✅ 必须先获取上下文
ctx.fillRect(0, 0, 100, 100); // ✅ 正常绘制
- 只支持
'2d'和'webgl'（或'webgl2'），传'3d'或空字符串会返回null - 同一个
<canvas></canvas>多次调用getContext('2d')会返回同一个上下文对象，不是新建 - 若页面缩放或高清屏下显示模糊，需手动设置
canvas.width/canvas.height像素值，而非仅靠 CSS 缩放
fillRect、arc、beginPath 配合使用才能画出预期图形
Canvas 是“状态机”模型：颜色、线宽、是否填充等属性持续生效，直到被显式修改；路径也需主动管理。直接连用 fillRect 和 arc 很可能只看到矩形——因为圆没调 fill() 或 stroke()。
画一个实心红圆和一个描边蓝矩形的最小完整流程：
const ctx = canvas.getContext('2d');
<p>// 红圆：先定义路径，再填充
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI * 2); // 圆心(100,100)，半径30，完整弧度
ctx.fill();</p><p>// 蓝矩形：fillRect 是快捷方法，自动隐含路径+填充
ctx.fillStyle = 'blue';
ctx.fillRect(200, 50, 80, 60); // x, y, width, height
-
arc(x,y,r,startAngle,endAngle,counterclockwise)的角度单位是弧度，不是度数；Math.PI * 2≈ 6.28 才是一整圈 -
beginPath()必须在每次新图形前调用，否则旧路径点会累积，导致意外连接或重绘 -
fillRect和strokeRect是特例，无需beginPath+fill组合；但arc、lineTo、rect（非 fillRect）等必须配对使用
requestAnimationFrame 是动画唯一合理选择，setInterval 会失控
Canvas 动画本质是“清屏 → 绘制 → 下一帧”，而 requestAnimationFrame（简称 rAF）由浏览器调度，天然与屏幕刷新率同步（通常 60fps），且标签页切走时自动暂停。用 setInterval 强刷会导致卡顿、掉帧、耗电，甚至动画速度随系统负载漂移。
一个简单弹跳球动画核心逻辑：
let y = 50;
let dy = 2;
<p>function animate() {
// 1. 清屏（关键！否则残留上一帧）
ctx.clearRect(0, 0, canvas.width, canvas.height);</p><p>// 2. 更新状态
y += dy;
if (y > canvas.height - 20 || y < 20) dy = -dy;</p><p>// 3. 绘制当前帧
ctx.beginPath();
ctx.arc(100, y, 20, 0, Math.PI * 2);
ctx.fill();</p><p>// 4. 请求下一帧
requestAnimationFrame(animate);
}
animate();
-
clearRect只清指定矩形区域；全屏清屏就填满 canvas 尺寸，别用fillRect(0,0,w,h)覆盖，那是“画黑块”，不是清屏 - rAF 回调函数接收一个时间戳参数，可用于做时间敏感计算（如匀速运动），但多数简单动画用不到
- 动画循环中避免频繁创建对象（如反复 new Path2D）、重复获取 DOM 元素或计算 canvas 尺寸，这些应提至循环外
图像资源加载完成前绘图会静默失败
用 drawImage 绘制图片时，如果 img 元素尚未加载完毕（img.complete === false），Canvas 不报错，但什么也不画——画面空白，调试时极难定位。
立即学习“Java免费学习笔记（深入）”；
安全做法永远监听 load 事件：
const img = new Image();
img.src = 'ball.png';
img.onload = () => {
ctx.drawImage(img, 0, 0); // ✅ 确保此时 img 已就绪
};
// ❌ 不要在这里直接 drawImage
- 即使
src是 base64 字符串，也要等load触发；部分浏览器会同步加载，但不可依赖 - 网络图片加载失败会触发
error事件，应添加处理，否则drawImage仍静默失败 - 多张图需全部加载完再启动动画？可用
Promise.all(images.map(img => new Promise(...)))等待
Canvas 的路径管理、状态继承、异步资源加载这三点，是绝大多数“画不出”“动不了”“闪一下就停”问题的根源。把 beginPath、clearRect、img.onload 当成条件反射去写，比记住所有 API 更重要。
