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 提供了一个通过 JavaScriptHTML<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
# the-canvas-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
canvas
height
moz-opaque
DeprecatedNon-standard
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

参见