Canvas绘图需先用getElementById获取元素再调用getContext('2d')获取上下文，否则报错；drawRect仅描边、fillRect仅填充、clearRect清空区域；drawImage需等图片load后调用；requestAnimationFrame比setTimeout更适合动画因其与屏幕刷新同步。
Canvas 是 HTML 中的一个 <canvas></canvas> 元素，它本身不绘图，只提供一块空白的位图画布；真正绘图靠的是 JavaScript 调用其 2D 渲染上下文（getContext('2d')）提供的 API。
你不能直接“写”图形到 <canvas></canvas> 上，必须通过 JS 获取上下文、设置样式、调用绘图方法，再手动触发绘制——这是初学者最容易卡住的地方。
怎么获取 canvas 的 2D 绘图上下文
必须先用 document.getElementById() 拿到 DOM 元素，再调用 getContext('2d')。如果漏掉这一步，所有绘图方法都会报错：TypeError: Cannot read property 'xxx' of null。
-
getContext('2d')返回一个CanvasRenderingContext2D对象，所有绘图操作都通过它进行 - 不能重复调用
getContext('2d')创建多个上下文——它返回的是同一个实例 - 如果页面还没加载完就执行 JS，
getElementById可能返回null，建议放在DOMContentLoaded事件里或把 script 放在 body 底部
const canvas = document.getElementById('myCanvas');
if (canvas) {
const ctx = canvas.getContext('2d'); // 必须这一步
ctx.fillStyle = '#ff6b6b';
ctx.fillRect(10, 10, 100, 80); // 现在才能画
}drawRect 和 fillRect 有什么区别
strokeRect() 只描边，fillRect() 只填充，clearRect() 清空指定区域（设为透明）。它们都是立即生效的“快捷方法”，不经过路径（path）机制。
立即学习“Java免费学习笔记（深入）”；
- 三者参数完全一致：
(x, y, width, height) -
strokeRect()受ctx.strokeStyle和ctx.lineWidth控制 -
fillRect()受ctx.fillStyle控制 -
clearRect()不受任何样式影响，强制清为透明（alpha=0） - 如果你需要带圆角、阴影或渐变的矩形，就不能只靠这三个函数，得走
beginPath()+rect()+fill()/stroke()流程
为什么 drawImage 不显示图片
常见原因是图片还没加载完成就调用了 drawImage()，导致绘图时图像数据为空。Canvas 不会等图片加载——它只认当前是否已解码。
- 务必监听图片的
load事件，在回调里调用drawImage() - 不要用本地
file://协议直接打开 HTML——现代浏览器会因 CORS 策略阻止drawImage读取本地图片 -
drawImage()有 3 种签名，最常用的是：drawImage(image, dx, dy)和drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)（用于裁剪缩放） - 如果传入
image是<img alt="什么是Canvas_JavaScript中如何绘制图形" >元素但src为空或 404，控制台通常不会报错，但画面什么也不出现
const img = new Image();
img.src = 'logo.png';
img.onload = () => {
ctx.drawImage(img, 0, 0, 200, 100); // 确保此时 img 已加载完毕
};requestAnimationFrame 为什么比 setTimeout 更适合动画
因为 requestAnimationFrame() 由浏览器统一调度，与屏幕刷新率（通常是 60fps）同步，而 setTimeout(fn, 16) 只是“尽量每 16ms 执行一次”，实际可能延迟、跳帧甚至被节流。
- 使用
requestAnimationFrame时，浏览器知道你在做动画，可能自动优化（如标签页后台时暂停） - 它传入的时间戳是高精度的 DOMHighResTimeStamp，可用于计算精确帧间隔
- 必须在每次回调末尾再次调用自身，形成循环；忘记这步，动画只会执行一帧
- 如果动画逻辑耗时过长（>16ms），下一帧会被推迟，但不会丢帧——
setTimeout在这种情况下容易累积延迟
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新位置、重绘...
requestAnimationFrame(animate); // 关键：自己调自己
}
requestAnimationFrame(animate);Canvas 的核心不是“画什么”，而是“何时画、怎么同步、怎么管理状态”。很多视觉 bug 表面上是绘图代码错了，其实是上下文状态没重置（比如忘了 ctx.beginPath()）、坐标系没搞清（translate/scale 残留）、或者异步时机没卡准。
