今天想和大家分享一个让我“哇塞”了好几次的技术——HTML5 Canvas。刚开始我以为它就是个画图的标签，结果一上手才发现，原来它能做的事情远超想象：绘图、动画、游戏、甚至图像处理！这篇文章就带你从零开始，轻松入门Canvas，顺便写出你人生中第一个小动画。
一、什么是Canvas？它能干嘛？
<canvas> 是 HTML5 提供的一个原生标签，你可以把它理解为一块“画布”。通过 JavaScript，我们可以在上面绘制图形、文字、图片，还能做动画、处理像素，甚至开发小游戏（比如贪吃蛇、打砖块）！
它的最大优势是：轻量、高效、可控性强，特别适合做动态视觉效果。
🎯 小贴士：Canvas 是基于“状态”的绘图系统，一旦画上去，就只是像素点了，没有 DOM 节点的概念。
二、第一步：画个红色矩形
我们先来写一个最简单的例子，在画布上画一个红色的矩形。
<canvas id="demo" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d'); // 获取绘图上下文
// 设置填充颜色为红色
ctx.fillStyle = 'red';
// 画一个矩形（x, y, 宽, 高）
ctx.fillRect(0, 0, 300, 150);
// 再擦掉左上角一小块
ctx.clearRect(0, 0, 100, 50);
</script>
📌 效果：一个红色大矩形，左上角被“擦掉”了一块透明区域。
👉 fillRect() 是填充矩形，clearRect() 是清除指定区域。
三、加载图片：把网络图片画到画布上
Canvas 不只能画形状，还能画图片！我们来试试把一张网络图片画到画布上。
<canvas id="demo" width="640" height="360"></canvas>
<script>
const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d');
const img = new Image();
// 允许跨域加载图片（重要！否则会污染画布）
img.crossOrigin = 'anonymous';
img.src = 'https://img2.baidu.com/it/u=3590113950,3364353300&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=360';
img.onload = function () {
// 图片加载完成后，绘制到画布
ctx.drawImage(img, 0, 0);
};
</script>
⚠️ 注意：如果图片不支持跨域，浏览器会抛出安全错误，所以记得加 img.crossOrigin = 'anonymous'。
四、进阶：用 requestAnimationFrame 做一个颜色渐变动画
现在我们来点有意思的——做一个不断变化颜色和数字的动画！
<canvas id="demo" width="600" height="400" style="border: 2px solid red;"></canvas>
<script>
const canvas = document.getElementById('demo');
const ctx = canvas.getContext('2d');
let dis = 0; // 用于控制颜色和数字
function animation() {
// 清除整个画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 设置当前帧的颜色和文字
ctx.fillStyle = `rgba(${dis}, 0, 0, 1)`;
ctx.font = '30px Verdana';
ctx.fillText(dis, 50, 100);
// 数值递增，超过255归零（RGB颜色范围0-255）
dis = (dis + 1) % 256;
// 请求下一帧，形成循环
requestAnimationFrame(animation);
}
// 启动动画
animation();
</script>
🎯 效果：一个不断从黑变红再变黑的数字，从 0 跑到 255 又回到 0，无限循环！
💡 requestAnimationFrame 是浏览器专门为动画设计的 API，比 setInterval 更流畅、更节能。
五、Canvas 的常见用途
| 场景 | 应用举例 |
|---|---|
| 数据可视化 | 动态图表、粒子背景 |
| 游戏开发 | 小游戏、H5小游戏 |
| 图像处理 | 图片压缩、滤镜、裁剪 |
| 动画特效 | 页面背景动画、加载动效 |
| 手写签名 | 移动端签名板 |
结语
Canvas 看似简单，实则潜力巨大。它不像 Vue、React 那样炫酷，但它却是视觉表现的底层基石。当你学会用代码“画画”，你会发现前端的世界突然变得生动起来。
别再只写按钮和列表了，试着用 Canvas 画个跳动的心，或者做个星空背景吧！动手才是最好的学习方式。
如果你觉得这篇文章有帮助，欢迎点赞、收藏，也欢迎在评论区分享你的第一个 Canvas 作品！我们一起成长！
