Canvas API - 提供了一种通过 JavaScript 和 HTML <canvas> 元素绘制图形的方法

Canvas API（画布 API）提供了一种通过 JavaScript 和 HTML <canvas> 元素绘制图形的方法。它可以用于动画、游戏图形、数据可视化、照片处理和实时视频处理。

Canvas API 主要集中在 2D 图形上。WebGL API，也使用了 <canvas> 元素，绘制硬件加速的 2D 和 3D 图形。

基本例子

这个简单的实例在画布上绘制了一个绿色矩形。

HTML

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

JavaScript

Document.getElementById() 方法获取了对 HTML <canvas> 元素的引用。接下来，HTMLCanvasElement.getContext() 方法获取该元素的上下文 - 将在其上绘制图形的东西。

实际的绘制是使用 CanvasRenderingContext2D 接口完成的。fillStyle 属性使矩形变为绿色。fillRect() 方法将在左上角 (10，10) 的位置，并画出宽 150，高 100 大小的矩形。

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

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

结果

<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
</script>

尝试一下 »

参考

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasImageSource
• CanvasPattern
• ImageBitmap
• ImageData
• RenderingContext
• TextMetrics
• OffscreenCanvas
• Path2D
• ImageBitmapRenderingContext

注意： 与 WebGLRenderingContext 相关的接口在 WebGL 中查看。

OffscreenCanvas 在 Web Worker 中也可用。

CanvasCaptureMediaStreamTrack 是一个相关的接口。

指南和教程

画布教程

全面的教程，涵盖了 Canvas API 的基本用法及其高级功能。

HTML5 画布深挖

这是一本介绍 Canvas API 和 WebGL 的实用书籍。

画布手册

Canvas API 的便捷参考。

演示：一个基本的射线投射器

使用画布制作光线追踪动画的演示。

使用画布处理视频

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

类库

Canvas API 非常强大，但使用起来并不总是那么简单。下面列出的库可以使基于画布的项目的创建更快，更轻松。

• EaselJS 是一个开源的画布库，它使创建游戏、生成式艺术和其他高度图形化的体验变得简单。
• Fabric.js 是一个具有SVG解析功能的开源画布库。
• heatmap.js 是一个用于创建基于画布的数据热图的开源库。
• JavaScript InfoVis Toolkit 可以创建交互式数据可视化。
• Konva.js 是一个用于桌面和移动应用的2D画布库。
• p5.js 为艺术家、设计师、教育工作者和初学者提供了一整套画布绘制功能。
• Paper.js 是一个开源的矢量图形脚本框架，运行在 HTML5 画布之上。
• Phaser 是一个快速、免费、有趣的开源框架，用于Canvas和WebGL驱动的浏览器游戏。
• Pts.js 是一个在canvas和SVG中进行创意编码和可视化的库。
• Rekapi 是一个针对 Canvas 的动画关键帧API。
• Scrawl-canvas 是一个用于创建和操作 2D 画布元素的开源 JavaScript 库。
• ZIM 框架为在画布上进行编码创意提供了便利、组件和控件 -- 包括无障碍性和数百个丰富多彩的教程。

注意： 有关使用 WebGL 的 2D 和 3D 库，请参见 WebGL API。

规范

规范	状态	备注
HTML Living Standard the 2D rendering context 的定义	现行的标准	-

浏览器兼容性

Mozilla 应用程序从 Gecko 1.8（Firefox 1.5 开始）开始提供对 <canvas> 的支持。该元素最初是由苹果公司为OS X 仪表板和 Safari 引入的。Internet Explorer 从 IE 9 开始支持 <canvas>；对于早期版本的IE，页面可以通过包含 Google 的 Explorer Canvas 项目的脚本来支持。Google Chrome 和 Opera 9 也支持 <canvas>。

相关链接

• WebGL