Canvas - Web API 接口参考 编辑

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

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

基础示例

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

HTML

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

JavaScript

Document.getElementById() 方法获取HTML <canvas> 元素的引用。接着，HTMLCanvasElement.getContext() 方法获取这个元素的context——图像稍后将在此被渲染。

由 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);

结果

参考

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

备注: 与 WebGLRenderingContext 有关的接口请参考 WebGL。

CanvasCaptureMediaStream 也与之相关。

教程与指导

Canvas 教程

一个综合性教程，包括了<canvas>的基本用法与高级功能。

代码片段: Canvas

一些面向开发者的 <canvas> 代码片段。

深入HTML5 Canvas

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

Demo：一个基础的光线追踪器

运用canvas制作的光线追踪动画示例。

使用canvas绘制视频 

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

库

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

• EaselJS 使制作游戏、创作类艺术和其他侧重图形项目更容易的开源canvas库
• Fabric.js 具有SVG解析功能的开源canvas库
• heatmap.js 基于 canvas的热点图的开源库
• JavaScript InfoVis Toolkit 创建交互式的2D Canvas数据可视化
• Konva.js 用于桌面端和移动端应用的2D canvas库
• p5.js 包含给艺术家、设计师、教育者、初学者使用的完整的canvas绘制功能
• Paper.js 运行于HTML5 Canvas上的开源矢量图形脚本框架
• Phaser 用于基于Canvas和WebGL的浏览器尤其的快速、自由、有趣的开源框架
• Processing.js 用于处理可视化语言
• Pts.js 在canvas和SVG中进行创意性代码写作和可视化的库
• Rekapi 关键帧动画库
• Scrawl-canvas 用来创建和编辑2D图形的开源库
• ZIM 框架为canvas上的代码创意性提供方便性、组件和可控性，包括可用性和数百个色彩缤纷的教程

备注: 与WebGL有关的2D和3D的库请参考 WebGL。

标准

浏览器兼容性

Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从IE9开始支持<canvas> ，更旧版本的IE中，页面可以通过引入 Google 的 Explorer Canvas 项目中的脚本来获得<canvas>支持。Google Chrome和Opera 9+ 也支持 <canvas>。

其它相关

• WebGL