在前端开发中，HTML5 的 <canvas> 元素为我们提供了一个强大的绘图平台。通过 JavaScript 控制 Canvas，你可以创建图表、游戏、动画甚至是图像处理工具。本文将带你一步步实现一个简单的动画 Demo，帮助你快速入门 Canvas。
一、什么是 Canvas？
<canvas> 是 HTML5 中新增的一个标签，它本身只是一个空白的矩形区域，没有内置的绘图能力。真正的绘图功能是通过 JavaScript 来调用 Canvas 提供的 API 实现的。
二、准备工作
首先，在你的 HTML 文件中添加一个 <canvas> 元素：
Html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Canvas 动画入门</title>
<style>
canvas {
background-color: #f0f0f0;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
// JavaScript 代码将写在这里
</script>
</body>
</html>三、获取上下文并绘制基本图形
Canvas 的绘图操作是通过“上下文（context）”对象完成的。我们使用 getContext('2d') 方法来获取 2D 绘图上下文。
Javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);这段代码会在画布上绘制一个红色的正方形。
四、让图形动起来 —— 动画基础
Canvas 本身不支持动画，但我们可以利用“清空画布 → 重绘 → 延迟执行”的方式模拟动画效果。我们以一个小球在画布中移动为例：
Javascript
let x = 0;
let y = 200;
let dx = 2;
function drawBall() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 设置填充颜色
ctx.fillStyle = 'blue';
// 绘制圆形（使用路径）
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
// 更新位置
x += dx;
// 边界检测
if (x + 20 > canvas.width || x - 20 < 0) {
dx = -dx;
}
// 循环执行
requestAnimationFrame(drawBall);
}
drawBall(); // 启动动画五、理解代码逻辑
- ctx.arc(x, y, radius, startAngle, endAngle)：用于绘制圆形。
- clearRect()：清除整个画布，避免旧帧残留。
- requestAnimationFrame()：浏览器推荐的动画循环方法，性能更优。
六、扩展你的动画
你可以尝试添加更多元素，例如：
- 多个小球同时运动
- 添加碰撞检测
- 用户交互（如点击或拖拽）
七、总结
通过这个简单的动画 Demo，你应该已经掌握了 Canvas 的基本使用方法和动画实现思路。Canvas 是一个非常灵活的工具，掌握它将为你打开网页图形编程的大门。