Canvas绘制图形与动画教程

本篇文章向大家介绍《Canvas如何绘制图形与动画？》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

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
• 同一个 多次调用 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</p>

• 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();</p>

• clearRect 只清指定矩形区域；全屏清屏就填满 canvas 尺寸，别用 fillRect(0,0,w,h) 覆盖，那是“画黑块”，不是清屏
• rAF 回调函数接收一个时间戳参数，可用于做时间敏感计算（如匀速运动），但多数简单动画用不到
• 动画循环中避免频繁创建对象（如反复 new Path2D）、重复获取 DOM 元素或计算 canvas 尺寸，这些应提至循环外

图像资源加载完成前绘图会静默失败

用 drawImage 绘制图片时，如果 img 元素尚未加载完毕（img.complete === false），Canvas 不报错，但什么也不画——画面空白，调试时极难定位。

安全做法永远监听 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 更重要。

好了，本文到此结束，带大家了解了《Canvas绘制图形与动画教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！