HTML Canvas

HTML5 Canvas API

HTML 的 <canvas> 元素提供了一种强大的方式，可以使用 JavaScript 在网页上动态绘制图形、动画和处理图像。

Canvas 输出示例：

<!-- canvas 元素本身只是一个容器 -->
<canvas id="myDemoCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML canvas 标签。
</canvas>

<p>上面边框内的图形是使用 Canvas API 绘制的。</p>

（需要在 Canvas 上绘制图形需要 JavaScript 代码，见下文示例。）

什么是 HTML Canvas？

<canvas> 元素在页面上创建了一个固定大小的绘制表面。

它充当一个容器；您使用 JavaScript 访问其渲染上下文（通常是 2D 上下文），并在该上下文上调用方法来绘制形状、文本、图像等。

可以将其想象成一个您可以用代码在其上绘画的数字画布。

浏览器支持

<canvas> 元素及其 2D 渲染上下文得到了所有现代 Web 浏览器的广泛支持。

Canvas 基本用法

1. 将 <canvas> 元素添加到 HTML

在 HTML 中包含 <canvas> 标签，为其指定一个 id（以便在 JavaScript 中引用）并指定其 width 和 height 属性。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
  为旧浏览器提供的备用内容。
</canvas>

注意：使用 HTML 属性设置宽度和高度很重要，而不仅仅是使用 CSS。CSS 尺寸设置会缩放整个 Canvas，而属性则定义实际的绘制分辨率。

2. 在 JavaScript 中获取渲染上下文

使用 JavaScript 获取 Canvas 元素的引用，然后获取其 2D 渲染上下文。

const canvas = document.getElementById('myCanvas');
// 在获取上下文之前检查是否支持 canvas
if (canvas.getContext) {
  const ctx = canvas.getContext('2d');
  // 您现在可以在 'ctx'（上下文）对象上绘制了
} else {
  // 不支持 Canvas
  console.error('Canvas API not supported in this browser.');
}

3. 在上下文上绘制

在 ctx 对象上调用方法进行绘制。以下是一些常见示例：

绘制矩形：

// 设置填充颜色
ctx.fillStyle = 'red';
// 绘制填充矩形：fillRect(x, y, width, height)
ctx.fillRect(10, 10, 150, 75);

绘制线条：

// 设置描边颜色
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;

// 定义路径起点
ctx.moveTo(0, 0);
// 定义路径终点
ctx.lineTo(200, 100);
// 渲染路径（绘制线条）
ctx.stroke();

绘制圆形：

ctx.strokeStyle = 'green';
ctx.lineWidth = 2;

// 开始新路径
ctx.beginPath();
// 绘制弧/圆形：arc(x, y, radius, startAngle, endAngle)
// 角度以弧度为单位（0 到 2 * Math.PI 表示整圆）
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
// 渲染路径轮廓
ctx.stroke();

绘制文本：

// 设置字体样式
ctx.font = '24px Arial';
ctx.fillStyle = 'purple';
// 绘制填充文本：fillText(text, x, y)
ctx.fillText('Hello Canvas!', 10, 50);

// 绘制轮廓文本：strokeText(text, x, y)
ctx.strokeStyle = 'black';
ctx.strokeText('Outline', 10, 90);

绘制渐变：

// 创建线性渐变：createLinearGradient(x0, y0, x1, y1)
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'blue'); // 起始颜色
gradient.addColorStop(1, 'white'); // 结束颜色

// 用渐变填充矩形
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 180, 80);

绘制图像：

const img = new Image(); // 创建新的 Image 元素
img.onload = function() {
  // 在 Canvas 上绘制图像：drawImage(image, x, y)
  ctx.drawImage(img, 10, 10);
  // 也可以指定宽度/高度：drawImage(image, x, y, width, height)
};
img.src = 'myImage.png'; // 设置源路径，触发加载

可访问性注意事项

在 <canvas> 上绘制的内容不是 DOM 的一部分，通常屏幕阅读器无法访问。如果 Canvas 显示重要信息：

• 在 <canvas> 标签内部提供备用内容。
• 在 canvas 元素或相关元素上使用 ARIA 属性来描述其用途或内容。
• 在页面的其他位置以替代的、可访问的格式（例如图表的数据表）提供相同的信息。

常见用例

Canvas 常用于：

• 数据可视化（图表、图形）
• 简单游戏和动画
• 图像处理和效果
• 在线绘图或照片编辑工具