从零开始:用Canvas绘制你的第一个动画小作品

技术教程gslnedu2025-07-08 0:32:162A⁺A^-

在前端开发中，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 是一个非常灵活的工具，掌握它将为你打开网页图形编程的大门。

点击这里复制本文地址以上内容由朽木教程网整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！

html动画

上一篇：平滑升级!一文掌握CSS过渡与动画属性，让你的网页动起来!