Canvas绘图需先获取2D上下文ctx=canvas.getContext('2d')，再用fillRect/strokeRect画矩形、arc画圆、beginPath+路径方法画图形；动画须用requestAnimationFrame实现清屏→绘制→循环；drawImage需在img.onload中调用以防未加载。
Canvas 本身不提供“绘制图形”的高级接口，所有图形都靠 context 的底层绘图命令一条条画出来；动画不是 Canvas 自带功能，而是靠 requestAnimationFrame 驱动重绘实现的。
怎么获取并初始化 2D 绘图上下文
必须先拿到 元素，再调用 getContext('2d')。如果跳过这步直接操作，所有绘图方法都会报错或静默失败。
-
getContext('2d')返回的是一个CanvasRenderingContext2D实例，它才是真正的绘图对象 - 务必检查返回值是否为
null（比如传了错误的上下文类型如'webgl'但浏览器不支持） - 推荐在
DOMContentLoaded后获取元素，避免 DOM 尚未就绪
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
console.error('2D context not available');
}
怎么画矩形、圆形和路径
Canvas 没有“画圆”这种独立函数，arc() 是唯一画弧/圆的方式；矩形虽有快捷方法，但本质仍是路径操作。
-
fillRect(x, y, width, height)和strokeRect(x, y, width, height)是特例，不依赖路径状态 - 画圆必须用
arc(x, y, radius, startAngle, endAngle, anticlockwise)，注意角度单位是弧度，不是度 - 任何基于路径的绘制（如
fill()、stroke()）前，必须先调用beginPath()，否则会累积上一次路径，导致意外重绘 - 路径画完后建议立即调用
closePath()（尤其多边形），否则可能缺边
ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); // 完整圆 ctx.fillStyle = 'blue'; ctx.fill(); <p>ctx.beginPath(); ctx.moveTo(200, 50); ctx.lineTo(250, 100); ctx.lineTo(200, 150); ctx.closePath(); // 关键：闭合三角形 ctx.strokeStyle = 'red'; ctx.stroke();</p>
怎么实现平滑动画（不是 setTimeout 循环）
Canvas 动画的核心是「清空 → 绘制 → 请求下一帧」三步闭环，requestAnimationFrame 是唯一推荐方式；用 setTimeout 或 setInterval 会导致掉帧、卡顿甚至失控。
- 每次动画帧开始前，必须用
clearRect(0, 0, canvas.width, canvas.height)清屏（或只清局部区域） - 不要在动画循环里反复调用
getContext('2d')，复用已有ctx - 动画逻辑应分离：状态更新（如 x += dx）和绘制（
ctx.fillRect(...)）不能混在一起写死 - 注意 canvas 的像素比问题：高 DPI 屏幕下，若未缩放
canvas.width/canvas.height，图形会模糊
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
<p>ctx.fillStyle = 'green';
ctx.fillRect(x, 50, 40, 40);</p><p>x += 2;
if (x > canvas.width) x = -40;</p><p>requestAnimationFrame(animate);
}
animate();</p>
为什么 drawImage 有时不显示图片
drawImage() 不会等待图片加载完成，它只管“此刻有没有图像数据”。如果图片还没加载好就调用，什么也不会画出来，也不报错。
- 必须监听图片的
load事件，在回调里调用drawImage - 已缓存的图片（如重复使用同一
img对象）可能触发同步加载，但不可依赖 - 用
crossOrigin属性处理跨域图片，否则后续调用toDataURL()或读取像素会失败 - 参数顺序容易错：
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，前 3 个是源图裁剪，后 4 个是目标绘制位置和尺寸
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'sprite.png';
img.onload = () => {
ctx.drawImage(img, 0, 0, 64, 64, 100, 100, 64, 64);
};
Canvas 的“简单”是假象——它把所有控制权交给你，也意味着每一步都要自己校验状态、管理资源、处理边界。最容易被忽略的是 beginPath() 的调用时机、clearRect() 的范围精度，以及图片加载异步性带来的竞态。这些地方一漏，动画就断、图形就叠、调试就抓瞎。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
