玩转Canvas：从静态图像到动态动画的奇妙之旅

大家好，我是FogLetter，今天要和大家分享一个前端开发中非常有趣的话题------Canvas画布技术。Canvas就像是网页上的一个神奇画板，我们可以用JavaScript在上面绘制各种图形、动画甚至开发游戏。下面我就带大家一起探索Canvas的奥秘！

一、Canvas初体验：静态图像绘制

让我们从一个最简单的例子开始：

html 复制代码

<canvas id="demo"></canvas>
<script>
  // 获取画布元素
  let canvas = document.getElementById('demo');
  // 获取绘制上下文
  let context = canvas.getContext('2d');
  
  const img = new Image();
  img.src = 'https://img2.baidu.com/...'; // 图片URL
  img.onload = function () {
    context.drawImage(img, 0, 0);
  }
</script>

这段代码做了什么呢？

首先我们创建了一个canvas元素
然后通过getContext('2d')获取2D绘图上下文
加载一张网络图片并在加载完成后绘制到canvas上

小技巧：在实际项目中，我们通常会先设置canvas的宽高，否则默认大小可能不符合需求：

javascript 复制代码

canvas.width = 800;
canvas.height = 600;

二、Canvas基础绘图：从简单图形开始

Canvas提供了丰富的API来绘制基本图形。让我们看一个绘制矩形的例子：

javascript 复制代码

let ctx = canvas.getContext('2d');
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(0, 0, 300, 150); // 绘制填充矩形
ctx.clearRect(20, 20, 100, 50); // 清除矩形区域

这里我们使用了三个关键方法：

fillStyle：设置填充颜色
fillRect(x, y, width, height)：绘制填充矩形
clearRect(x, y, width, height)：清除指定矩形区域（就像黑板擦）

思考题：如何绘制一个只有边框没有填充的矩形呢？（答案在文末）

三、让Canvas动起来：动画基础

Canvas最强大的功能之一就是可以创建流畅的动画。下面是一个简单的数字递增动画：

javascript 复制代码

let dis = 0;
function animation() {
  requestAnimationFrame(function() {
    ctx.clearRect(0, 0, 300, 150); // 清空画布
    ctx.fillStyle = `rgba(${dis++},0,0)`; // 动态改变颜色
    ctx.fillText(dis++,110,90); // 绘制文本
    ctx.font = '50px Verdana'; // 设置字体
    animation(); // 递归调用形成动画循环
    if(dis >= 255) {
      dis = 0; // 重置计数器
    }
  })
}
animation();

这段代码展示了Canvas动画的基本原理：

使用requestAnimationFrame实现动画循环（比setInterval更高效）
每一帧先清空画布
更新状态（这里dis在递增）
绘制新内容
循环往复

性能优化小贴士：对于复杂动画，可以尽量减少画布清除和重绘的范围，只重绘发生变化的部分。

四、Canvas进阶技巧

1. 路径绘制

Canvas不仅可以绘制矩形，还能绘制复杂路径：

javascript 复制代码

ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.lineTo(150, 50); // 画线到
ctx.lineTo(100, 150); // 画线到
ctx.closePath(); // 闭合路径
ctx.stroke(); // 描边

2. 渐变效果

Canvas支持线性渐变和径向渐变：

javascript 复制代码

// 线性渐变
let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

3. 图像变换

Canvas支持平移、旋转、缩放等变换：

javascript 复制代码

ctx.save(); // 保存当前状态
ctx.translate(100, 100); // 平移
ctx.rotate(Math.PI/4); // 旋转45度
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // 恢复之前保存的状态

五、Canvas性能优化

当开发复杂的Canvas应用时，性能优化至关重要：

分层渲染：将静态内容和动态内容分开到不同的canvas上
避免频繁的canvas状态改变：如fillStyle的改变开销较大
合理使用clearRect：只清除需要更新的区域
减少绘制调用：批量绘制相同样式的图形

六、Canvas的现代应用

Canvas在现代Web开发中有广泛应用：

数据可视化（图表、仪表盘）
图像处理（滤镜、裁剪）
游戏开发（2D游戏、特效）
教育应用（交互式教学）
创意艺术（生成艺术、交互设计）

结语

Canvas就像是一扇通往创意编程的大门，通过简单的API，我们可以创造出令人惊叹的视觉效果。从静态图像到复杂动画，从数据可视化到互动游戏，Canvas的可能性只受限于我们的想象力。

思考题答案 ：使用ctx.strokeRect(x, y, width, height)可以绘制只有边框的矩形。