Canvas API是面向像素的即时模式绘图接口，需先获取canvas元素再调用getContext('2d')；动态图形须手动清屏、重算、重绘；颜色样式需显式设置；drawImage易因参数混淆导致失真；性能依赖合理帧控与计算节制。
Canvas API 不是“画布控件”，它是一套通过 getContext('2d') 获取的、面向像素的即时模式绘图接口——这意味着你画完就丢，没有对象树，也不自动重绘。
怎么拿到能画画的上下文？
必须先用 document.getElementById() 拿到 <canvas></canvas> 元素，再调用 .getContext('2d')。漏掉这一步，所有绘图方法都会报 TypeError: Cannot call method 'xxx' of null 或直接静默失败。
常见错误：只写了 <canvas id="myCanvas"></canvas>，但没设 width 和 height 属性（注意不是 CSS 的 style.width），导致画布实际尺寸为 300×150，缩放失真。
const canvas = document.getElementById('myCanvas');
canvas.width = 800;
canvas.height = 600;
const ctx = canvas.getContext('2d'); // 必须这行才有 ctx怎样画一个会动的圆？
动态图形 = 清屏 + 重算位置 + 重绘。不能只改坐标就指望浏览器自动刷新——Canvas 不维护状态，clearRect() 是你唯一可靠的“擦除”手段。
立即学习“Java免费学习笔记（深入）”；
关键点：
-
requestAnimationFrame()是首选驱动，比setInterval更顺滑、更省电 - 每次循环里必须调用
ctx.clearRect(0, 0, canvas.width, canvas.height) - 圆心坐标要随时间变化，比如用
Date.now() * 0.002做弧度参数
let x = 100;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
x = 100 + Math.sin(Date.now() * 0.002) * 200;
ctx.beginPath();
ctx.arc(x, 300, 20, 0, Math.PI * 2);
ctx.fill();
requestAnimationFrame(animate);
}
animate();为什么 fillRect 看不见？或者颜色不对？
Canvas 颜色和样式全靠 ctx 上的属性控制，且无默认继承链。最常踩的坑是：
- 忘了设
ctx.fillStyle（默认是#000000，但若之前设过透明色或渐变，可能残留） - 在
beginPath()之前就调了fillStyle，其实没问题；但若在fill()后又改fillStyle却没重绘，当然看不到效果 - 用了
rgba(0,0,0,0.1)叠加多次，结果越画越黑——因为 Canvas 是直接写像素，不是合成图层
调试建议：在动画循环开头加一行 console.log(ctx.fillStyle)，确认当前填充色符合预期。
drawImage 怎么总画歪或模糊？
drawImage() 有 3 种签名，最容易错的是把“源图像裁剪区域”和“目标画布贴入区域”搞混。尤其当传 9 个参数时，第 5–6 是源宽高，第 7–8 是目标宽高——缩放比例不匹配就会拉伸/模糊。
性能提示：频繁调用 drawImage() 绘制同一张图片时，确保该图片已自然加载完成（监听 img.onload），否则画出来是空的；也别在每帧都 new Image()。
抗锯齿开关：ctx.imageSmoothingEnabled = false 可禁用缩放插值，在像素风场景下必要。
Canvas 的“动态”本质是手动控制帧——没有“绑定数据”“响应式更新”这类抽象，只有你和像素之间的直来直去。复杂动画容易卡，是因为你没节流绘制逻辑，或者在 requestAnimationFrame 里做了太多计算。真正难的不是画什么，而是决定每一帧该算什么、清什么、画什么。
