Canvas 教程

本教程介绍了如何使用 <canvas> 元素绘制 2D 图形，从基础开始。提供的示例应该能让您对 Canvas 的功能有一个清晰的了解，并提供代码片段，帮助您开始构建自己的内容。

<canvas> 是一个 HTML 元素，可用于通过脚本（通常是 JavaScript）绘制图形。例如，可以使用它来绘制图表、组合照片或创建简单的动画。

Canvas 最初由 Apple 为 macOS Dashboard 在 WebKit 中引入，此后已被浏览器实现。如今，所有主流浏览器都支持它。

开始之前

使用 <canvas> 元素并不困难，但您需要对 HTML 和 JavaScript 有基本的了解。<canvas> 元素在一些旧版浏览器中不受支持，但在所有主流浏览器的新版本中都得到支持。Canvas 的默认大小为 300 像素 × 150 像素（宽度 × 高度）。但是，可以使用 HTML 的 height 和 width 属性定义自定义大小。为了在 Canvas 上绘制图形，我们使用 JavaScript 上下文对象，它可以动态创建图形。

本教程内容

  1. 基本用法
  2. 绘制形状
  3. 应用样式和颜色
  4. 绘制文本
  5. 使用图像
  6. 变换
  7. 合成和裁剪
  8. 基本动画
  9. 高级动画
  10. 像素操作
  11. 优化 Canvas
  12. 结尾

另请参见

致贡献者的说明

由于 2013 年 6 月 17 日当周发生的意外技术错误，我们丢失了本教程的历史记录，包括对所有过去贡献者内容的归属。对此我们深感抱歉，希望您能原谅这次不幸的事件。