Canvas API

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用 <canvas> 元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

基础示例

这个简单示例在画布上绘制一个绿色的长方形。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

Document.getElementById() 方法获取 HTML <canvas> 元素的引用。接着，HTMLCanvasElement.getContext() 方法获取这个元素的上下文——稍后将在此处渲染绘制的内容。

由 CanvasRenderingContext2D 接口完成实际的绘制。fillStyle 属性让长方形变成绿色。fillRect() 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 个单位高 100 个单位。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

结果

参考

备注： WebGL 包含了与 WebGLRenderingContext 有关的接口的参考。

备注： OffscreenCanvas 也在 web worker 中可用。

CanvasCaptureMediaStream 也是一个相关的接口。

教程与指导

Canvas 教程

一个综合性教程，涵盖了 Canvas API 的基本用法与高级特性。

深入 HTML5 Canvas

一个手把手的、长度与书本相当的 Canvas API 和 WebGL 介绍。

Canvas 手册

Canvas API 的便捷参考。

使用 canvas 操控视频

结合 <video> 和 <canvas> 来实现视频数据的实时操控。

库

Canvas API 是非常强大的，但不总是很容易使用。以下列出的库能够使创建基于 canvas 的项目更快、更简单。

  • EaselJS：使制作游戏、创作类艺术和其他侧重图形化的项目更容易的开源 canvas 库。
  • Fabric.js：具有 SVG 解析功能的开源 canvas 库。
  • heatmap.js：基于 canvas 的数据热力图的开源库。
  • JavaScript InfoVis Toolkit：创建交互式数据可视化。
  • Konva.js：用于桌面端和移动端应用的 2D canvas 库。
  • p5.js：包含给艺术家、设计师、教育者、初学者使用的完整的 canvas 绘制功能。
  • Paper.js：运行于 HTML Canvas 上的开源矢量图形脚本框架。
  • Phaser：用于基于 Canvas 和 WebGL 的浏览器游戏的快速、自由、有趣的开源框架。
  • Pts.js：用于 canvas 和 SVG 的创意编码和可视化的库。
  • Rekapi：用于 Canvas 动画关键帧的 API。
  • Scrawl-canvas：用于创建和操控 2D canvas 元素的开源 JavaScript 库。
  • ZIM：为在 canvas 上进行创意代码编写提供便利性以及相关组件和控件的框架，包括无障碍和数百个色彩缤纷的教程。
  • Sprig：使用 Canvas 实现的基于图块的游戏的开发库，适合初学者并且开源。

备注：与 WebGL 有关的 2D 和 3D 的库请参见 WebGL API。

规范

Specification
HTML Standard
# the-canvas-element

浏览器兼容性

BCD tables only load in the browser

参见