Canvas 绘图基础

Canvas 绘图基础

什么是 Canvas？

Canvas 是 HTML5 提供的一个绘图 API，它允许开发者使用 JavaScript 在网页上绘制图形、动画和游戏。与传统的 DOM 操作不同，Canvas 提供的是一个像素级的绘图环境，特别适合需要高性能图形渲染的场景。

基本特性

• 即时渲染：所有绘图操作都会立即反映在画布上
• 无状态：Canvas 不会记住绘制的内容，需要开发者手动管理
• 高性能：适合复杂动画和游戏开发
• 跨平台：在所有现代浏览器中都得到良好支持

开始使用 Canvas

1. 创建 Canvas 元素

在 HTML 文件中添加 canvas 标签：

<canvas id="myCanvas" width="500" height="300">
  您的浏览器不支持 Canvas，请升级或更换浏览器
</canvas>

2. 获取绘图上下文

在 JavaScript 中获取绘图上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 获取 2D 绘图上下文

基础绘图操作

绘制矩形

Canvas 提供了三种绘制矩形的方法：

// 填充矩形
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(10, 10, 100, 50); // (x, y, width, height)

// 描边矩形
ctx.strokeStyle = 'blue'; // 设置描边颜色
ctx.lineWidth = 3; // 设置线宽
ctx.strokeRect(150, 10, 100, 50);

// 清除矩形区域
ctx.clearRect(20, 20, 80, 30); // 清除指定区域

绘制路径

路径是 Canvas 中绘制复杂图形的基础：

// 开始路径
ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.lineTo(150, 50); // 第一条线
ctx.lineTo(100, 150); // 第二条线
ctx.closePath(); // 闭合路径

// 描边或填充
ctx.strokeStyle = 'green';
ctx.stroke();

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();

绘制圆形

使用 arc 方法绘制圆形或圆弧：

ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2); // (x, y, radius, startAngle, endAngle)
ctx.fillStyle = 'purple';
ctx.fill();

高级绘图技巧

使用渐变

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

// 线性渐变
const linearGradient = ctx.createLinearGradient(0, 0, 200, 0);
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(1, 'yellow');
ctx.fillStyle = linearGradient;
ctx.fillRect(10, 200, 200, 50);

// 径向渐变
const radialGradient = ctx.createRadialGradient(350, 250, 10, 350, 250, 50);
radialGradient.addColorStop(0, 'white');
radialGradient.addColorStop(1, 'blue');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 200, 100, 100);

绘制文本

Canvas 可以绘制文本并控制其样式：

ctx.font = '30px Arial'; // 设置字体
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 50, 300); // 填充文本
ctx.strokeText('Hello Canvas', 50, 350); // 描边文本

图像操作

Canvas 可以绘制和操作图像：

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  // 绘制图像
  ctx.drawImage(img, 10, 10);
  
  // 缩放图像
  ctx.drawImage(img, 10, 10, 100, 100);
  
  // 裁剪并绘制图像
  ctx.drawImage(img, 50, 50, 100, 100, 10, 10, 100, 100);
};

动画实现

Canvas 动画通常使用 requestAnimationFrame 实现：

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.fillRect(x, 50, 50, 50); // 绘制新位置
  x += 2;
  if (x < canvas.width) {
    requestAnimationFrame(animate); // 继续动画
  }
}
animate();

性能优化技巧

1. 分层渲染：使用多个 canvas 元素分层绘制
2. 离屏渲染：先在内存中绘制，再复制到显示 canvas
3. 减少绘制区域：只重绘变化的部分
4. 避免浮点坐标：使用整数坐标减少抗锯齿计算

实际应用案例

1. 数据可视化：绘制图表和图形
2. 游戏开发：2D 游戏引擎
3. 图像处理：滤镜和特效
4. 交互设计：自定义 UI 元素
5. 教育工具：数学函数绘图

学习资源

1. MDN Canvas 文档
2. 编程伙伴 Canvas 文档