是 新增的元素，可用于通过使用中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

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

也使用<canvas>元素在网页上绘制硬件加速的3D图形。

示例

这只是一个使用 方法简单的代码片段。

HTML

 

JavaScript

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.fillStyle = 'green';ctx.fillRect(10, 10, 100, 100);

 

编辑下面的代码，查看画布的变化:

参考

与 WebGLRenderingContext 有关的接口请参考 .

教程与指导

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

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

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

如何在canvas上绘制DOM内容，如HTML元素。

 

结合 和  来实现实时操作视频数据。

资源

通用

库

• 具有SVG解析功能的开源canvas库
• 专注于桌面与移动应用中的交互操作的开源canvas库
• 运行于HTML5 Canvas上的开源矢量图形脚本框架
•  开源的轻量的canvas库
• 强大轻量的canvas框架
• 用于处理可视化语言
•  一个开源的游戏引擎
•  一个开源的游戏引擎
• 图表库
• 关键帧动画库
• 用于数据可视化，创意编程和游戏开发的WebGL框架
• 创建交互式的2D Canvas数据可视化
• 类Flash API的canvas库
•  用来创建2d图形的开源库
•  基于 heatmaps 的 canvas 开源库