JavaScript Canvas怎么操作_如何绘制图形和动画【教程】

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(); 
ctx.beginPath(); ctx.moveTo(200, 50); ctx.lineTo(250, 100); ctx.lineTo(200, 150); ctx.closePath(); // 关键：闭合三角形 ctx.strokeStyle = 'red'; ctx.stroke();

怎么实现平滑动画（不是 setTimeout 循环）

Canvas 动画的核心是「清空 → 绘制 → 请求下一帧」三步闭环，requestAnimationFrame 是唯一推荐方式；用 setTimeout 或 setInterval 会导致掉帧、卡顿甚至失控。

立即学习“Java免费学习笔记（深入）”；

• 每次动画帧开始前，必须用 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); 
ctx.fillStyle = 'green'; ctx.fillRect(x, 50, 40, 40);
x += 2; if (x > canvas.width) x = -40;
requestAnimationFrame(animate); } animate();

为什么 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() 的范围精度，以及图片加载异步性带来的竞态。这些地方一漏，动画就断、图形就叠、调试就抓瞎。