告别枯燥！5分钟上手HTML5 Canvas，从0实现炫酷2D动画

一、为什么学Canvas？看完这篇就懂

还在觉得前端只能做静态页面？想做网页小游戏、炫酷数据可视化却无从下手？

其实HTML5的Canvas就是你的突破口！它能让你用JS直接在网页上画画、做动画，不管是2D小游戏还是动态数据图表，都能轻松实现。

这篇文章我会用最通俗的语言+可直接运行的代码 ，带你5分钟掌握Canvas核心用法，从画静态图形到实现流畅动画，看完就能上手实操！

二、Canvas核心基础：先搞定这几个关键

2.1 什么是Canvas？

Canvas是HTML5新增的画布标签，能通过JS API在网页上绘制任意图形、实现动画效果。

👉 踩坑提醒：老旧IE浏览器不支持Canvas，记得加降级提示！

2.2 核心步骤（必记）

获取Canvas标签
通过getContext()获取绘制上下文（2D/3D）
调用绘制API实现图形/动画

三、实战1：画静态图形（矩形+擦除）

先从最简单的静态图形入手，掌握填充、描边、擦除三个核心操作。

3.1 完整代码（可直接复制运行）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas画静态矩形</title>
</head>
<body>
  <!-- 画布容器，设置宽高和边框 -->
  <canvas id="myCanvas" width="600" height="400" style="border: 1px solid #000;">
    你的浏览器不支持Canvas，请升级浏览器！
  </canvas>

  <script>
    // 1. 获取画布元素
    const canvas = document.querySelector('#myCanvas');
    // 2. 获取2D绘制上下文（核心）
    const ctx = canvas.getContext('2d');

    // 3. 绘制填充矩形
    ctx.fillStyle = '#4299e1'; // 设置填充颜色（必加，否则默认黑色）
    ctx.fillRect(20, 20, 100, 80); // 坐标(x,y) + 宽高

    // 4. 绘制描边矩形
    ctx.strokeStyle = '#000'; // 描边颜色
    ctx.lineWidth = 4; // 描边宽度
    ctx.strokeRect(150, 20, 100, 80); // 只画边框，无填充

    // 5. 擦除指定区域
    ctx.clearRect(50, 50, 40, 30); // 擦除填充矩形的一部分
  </script>
</body>
</html>

3.2 踩坑提醒

fillStyle/strokeStyle必须在绘制前设置，否则不生效！
clearRect()的参数是「左上角坐标+宽高」，不是「两个对角坐标」。
Canvas的坐标原点在左上角，x向右、y向下。

四、实战2：实现流畅2D动画（核心）

静态图形只是基础，Canvas的核心价值是做动画！这里用requestAnimationFrame实现矩形移动动画。

4.1 动画原理

每帧先清空画布（clearRect）
计算新的绘制位置
绘制新图形
递归调用动画函数，实现60帧/秒的流畅效果

4.2 完整动画代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas 2D流畅动画</title>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400" style="border:1px solid #333;">
    你的浏览器不支持Canvas（旧IE会显示这段文字）
  </canvas>

  <script>
    const canvas = document.querySelector('#myCanvas');
    const ctx = canvas.getContext('2d');

    // 动画参数
    let x = 20; // 矩形x坐标（动态变化）
    const y = 20; // 固定y坐标
    const width = 100;
    const height = 80;
    const speed = 3; // 移动速度

    // 动画核心函数
    function animate() {
      // 1. 清空整个画布（必须！否则会出现拖影）
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // 2. 绘制矩形（新位置）
      ctx.fillStyle = '#4299e1';
      ctx.fillRect(x, y, width, height);
      
      // 3. 更新坐标
      x += speed;
      
      // 4. 边界判断（超出画布重置位置）
      if (x > canvas.width) {
        x = -width;
      }
      
      // 5. 递归调用，适配屏幕刷新率（替代setInterval）
      requestAnimationFrame(animate);
    }

    // 启动动画
    animate();
  </script>
</body>
</html>

4.3 踩坑提醒

千万别用setInterval做动画！它的执行时间和屏幕刷新率不同步，会导致卡顿。
requestAnimationFrame不需要设置时间间隔，浏览器会自动适配60帧/秒。
清空画布时要覆盖整个画布区域（0,0,canvas.width,canvas.height），否则会残留上一帧内容。

五、进阶方向：从动画到小游戏

掌握了基础动画后，就能拓展到小游戏开发了，比如经典的飞机大战：

基于上述动画逻辑，实现飞机移动
监听键盘/鼠标事件，实现交互
加入碰撞检测、子弹发射等逻辑
结合物理引擎/Three.js，实现3D效果

六、总结

Canvas是HTML5核心能力，能实现2D/3D绘图、动画、小游戏、数据可视化；
核心流程：获取画布 → 获取上下文 → 绘制/更新 → 动画调度；
动画的关键是requestAnimationFrame+ 逐帧清空画布；
避开setInterval、未设置样式、坐标计算错误这些坑，能少走80%的弯路。