HTML画布元素（Canvas）

HTML画布元素（Canvas）

HTML画布元素（<canvas>）是HTML5引入的一个强大特性，允许开发者通过JavaScript动态绘制图形、动画和交互式内容。它提供了一种位图绘制API，适用于游戏开发、数据可视化、图像处理和动态UI设计等场景。

基本介绍

<canvas> 元素是一个矩形区域，默认宽度为300像素，高度为150像素。它本身没有绘制能力，必须通过JavaScript进行操作。画布API提供了2D和WebGL（3D）两种渲染上下文，本文主要介绍2D上下文。

基本语法：

<canvas id="myCanvas" width="500" height="300">
  您的浏览器不支持Canvas元素
</canvas>

绘制上下文

要开始绘制，首先需要获取渲染上下文：

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

基本绘制方法

绘制矩形

画布提供了三种矩形绘制方法：

• fillRect(x, y, width, height) - 绘制填充矩形
• strokeRect(x, y, width, height) - 绘制矩形边框
• clearRect(x, y, width, height) - 清除矩形区域

示例：

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 80);

ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.strokeRect(50, 30, 120, 60);

ctx.clearRect(70, 50, 40, 20);

输出效果：

graph LR A[蓝色填充矩形] --> B[红色边框矩形] B --> C[中间清除区域]

绘制路径

路径由一系列点组成，可用于绘制复杂形状：

ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.lineTo(150, 50);
ctx.lineTo(100, 150);
ctx.closePath(); // 闭合路径
ctx.fillStyle = 'green';
ctx.fill();

绘制文本

画布支持两种文本绘制方法：

• fillText(text, x, y) - 填充文本
• strokeText(text, x, y) - 描边文本

可以设置字体、对齐方式等属性：

ctx.font = '30px Arial';
ctx.fillStyle = 'purple';
ctx.textAlign = 'center';
ctx.fillText('Hello Canvas', canvas.width/2, 50);

图像处理

可以在画布上绘制图像：

const img = new Image();
img.src = 'example.png';
img.onload = function() {
  ctx.drawImage(img, 10, 10, 100, 100);
};

变换与动画

画布支持多种变换操作：

• translate(x, y) - 移动原点
• rotate(angle) - 旋转
• scale(x, y) - 缩放

动画实现通常使用requestAnimationFrame：

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 50, 50);
  x += 1;
  if (x < canvas.width) {
    requestAnimationFrame(animate);
  }
}
animate();

高级特性

渐变与图案

可以创建线性渐变和径向渐变：

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

阴影效果

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(50, 50, 100, 100);

合成操作

通过globalCompositeOperation可以控制图形合成方式：

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 100, 100);

实际应用案例

1. 游戏开发：2D游戏引擎如Phaser基于Canvas实现 2. 数据可视化：图表库如Chart.js使用Canvas绘制 3. 图像编辑器：在线图片处理工具的核心技术 4. 交互式UI：特殊效果和动态界面元素

性能优化建议

• 避免频繁的canvas状态改变
• 对复杂图形使用离屏canvas
• 合理使用requestAnimationFrame
• 减少不必要的重绘区域

数学基础

Canvas绘图涉及的基本数学概念：

• 坐标系：左上角为原点(0,0)，x向右增加，y向下增加
• 角度：使用弧度制，$2\pi$弧度=360度
• 变换矩阵：$\left[\begin{array}{ccc}a& c& e\\ b& d& f\\ 0& 0& 1\end{array}\right]$

浏览器兼容性

现代浏览器都支持Canvas，但需要注意：

• IE9+支持基本功能
• 移动设备性能可能有限
• WebGL支持情况不同

学习资源

• MDN Canvas文档
• HTML5 Canvas Cookbook
• Canvas API规范

通过掌握Canvas，开发者可以创建丰富的图形应用，突破传统HTML的限制，实现更具表现力的Web内容。