Canvas

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

结果

参考

备注: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

标准

标准 状态 备注
HTML Living Standard
the 2D rendering context
Living Standard

浏览器兼容性

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>

其它相关