JavaScript Canvas绘制基础图形与动画教程

本文深入浅出地讲解了HTML5 Canvas的核心绘图机制与动画实现原理，强调Canvas并非“所见即所得”的绘图工具，而是通过JavaScript精确控制2D上下文的路径操作（beginPath、moveTo、arc等）、样式设置（fillStyle、strokeStyle）和渲染指令（fill、stroke）来构建图形；同时系统剖析了流畅动画的关键——requestAnimationFrame驱动下的清屏（clearRect）与重绘循环，并辅以小球运动等实例演示状态更新与边界处理，还点明了坐标变换、性能优化等进阶要点，帮助开发者真正掌握“如何用代码指挥画笔”，快速迈出Canvas图形编程的第一步。

Canvas 是 HTML5 提供的位图绘图 API，通过 JavaScript 操作 元素的 2D 上下文（getContext('2d')）就能绘制图形、实现动画。关键不是“画什么”，而是“怎么控制画笔”——设置样式、移动路径、描边填充、清屏重绘，这些才是核心。

获取上下文并设置基础画布环境

先在 HTML 中放一个 ，然后用 JS 获取 2D 上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

注意：width 和 height 必须设在 HTML 属性里（不是 CSS），否则会拉伸失真。常见坑：CSS 设置宽高只缩放显示，不改变实际绘图分辨率。

绘制基本图形：路径 + 样式 + 渲染

Canvas 不是“直接画圆”，而是“定义路径 → 设置样式 → 执行渲染”。所有图形都基于路径（path）操作：

• 矩形：最简单，有专用方法
  ctx.fillStyle = '#ff6b6b';
  ctx.fillRect(50, 30, 120, 80); // 填充
  ctx.strokeStyle = '#4ecdc4';
  ctx.lineWidth = 2;
  ctx.strokeRect(50, 130, 120, 80); // 描边
• 圆形/弧线：用 arc(x, y, radius, startAngle, endAngle, anticlockwise)
  ctx.beginPath();
  ctx.arc(200, 150, 40, 0, Math.PI * 2); // 整圆
  ctx.fillStyle = '#ffd166';
  ctx.fill();
• 线条和多边形：用 moveTo、lineTo、closePath
  ctx.beginPath();
  ctx.moveTo(100, 50);
  ctx.lineTo(150, 20);
  ctx.lineTo(200, 50);
  ctx.closePath();
  ctx.fillStyle = '#118ab2';
  ctx.fill();

⚠️ 记住每次画新图形前调用 beginPath()，否则路径会累加；fill() 和 stroke() 才真正把路径画出来。

实现简单动画：requestAnimationFrame + 清屏 + 重绘

动画本质是“快速重复绘制变化的画面”。Canvas 没有自动刷新，必须手动控制：

• 用 requestAnimationFrame(animate) 替代 setTimeout，更流畅且省电
• 每一帧开始前用 ctx.clearRect(0, 0, canvas.width, canvas.height) 清空画布（或用全屏背景色覆盖）
• 更新图形位置/状态变量（如 x += dx），再重新绘制

例子：让小球匀速横穿画布

let x = 0;
const dx = 2;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 150, 12, 0, Math.PI * 2);
  ctx.fillStyle = '#ff9e00';
  ctx.fill();
  x += dx;
  if (x > canvas.width + 12 || x   requestAnimationFrame(animate);
}
animate();

进阶提示：坐标变换与性能注意点

想旋转、缩放图形？别重算坐标，用 Canvas 内置变换：

• ctx.save() / ctx.restore() 保存和恢复当前绘图状态（含变换、样式等）
• ctx.translate(x, y) 移动原点；ctx.rotate(angle) 绕原点旋转（单位是弧度）；ctx.scale(sx, sy) 缩放
• 避免每帧反复创建对象（如 new Image）、重复解析路径 —— 提前准备，复用变量
• 复杂动画考虑用 OffscreenCanvas（Worker 中预渲染）或分层 canvas（背景静止层 + 前景动态层）

基本上就这些。Canvas 不复杂但容易忽略路径管理和清屏逻辑，动手画几个矩形和小球，节奏就出来了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~