当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptCanvas基础教程：绘图与动画实现

JavaScriptCanvas基础教程：绘图与动画实现

2026-01-17 14:52:36 0浏览收藏

怎么获取 Canvas 绘图上下文并确认是否可用

必须先拿到元素，再调用 getContext('2d')。如果返回 null，说明浏览器不支持或类型写错（比如误写成 '2D' 或 'webgl' 但没检查返回值）。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
  console.error('2D context not supported');
}

getContext('2d') 返回的是一个状态机对象，所有绘图操作都依赖它当前的属性（如 fillStyle、lineWidth）
不要在每次绘制时重复调用 getContext，缓存 ctx 变量即可
Canvas 的宽高必须用 canvas.width / canvas.height 设置（CSS 缩放会拉伸图像，不改变实际分辨率）

怎么画矩形、圆形和路径（非 SVG 方式）

Canvas 没有“画一个圆”这样的独立命令，所有图形都靠路径（path）+ 填充/描边组合实现。常见错误是忘记调用 beginPath()，导致上一次路径被意外复用。

ctx.fillStyle = '#ff6b6b';
ctx.fillRect(10, 10, 100, 50); // 直接填充矩形，不走路径
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI * 2); // 圆心 x/y、半径、起始/结束弧度
ctx.fill();
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 100);
ctx.lineTo(200, 150);
ctx.closePath();
ctx.stroke();

fillRect() 和 strokeRect() 是快捷方法，不依赖路径，适合简单形状
arc() 的角度单位是弧度，不是度数；Math.PI * 2 = 360°
每次调用 beginPath() 都会清空当前路径，漏掉它会导致多个图形连成一条线

怎么实现流畅动画（避免卡顿和残留）

Canvas 动画本质是「清屏 → 绘制 → 重绘」循环。卡顿通常因为没用 requestAnimationFrame，残留则是因为没清空画布。

function animate() {
  // 清除整个画布（最简单方式）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新位置、绘制
x += dx;
y += dy;
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 20, 20);
requestAnimationFrame(animate);
}
animate();