Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

<canvas>HTML5 新增的元素,可使用JavaScript脚本来绘制图形。例如:画图,合成照片,创建动画甚至实时视频处理与渲染。

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

<canvas>元素也可被WebGL用作网页上3D图形硬件加速

示例

这是一个使用 CanvasRenderingContext2D.fillRect() 方法的简单例子.

HTML

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

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

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

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

参考

WebGLRenderingContext 有关的接口请参考 WebGL.

教程与指导

Canvas 教程
包括了<canvas>的基本用法与高级功能的综合性教程。
代码片段: Canvas
一些面向开发者的 <canvas> 代码片段。
光线追踪Demo
运用canvas制作的光线追踪动画示例。
在canvas上绘制DOM对象
如何在canvas上绘制DOM内容,如HTML元素。
使用canvas绘制图形 (将合并到主教程中)
一篇canvas的介绍,大部分内容被 Canvas教程 所替代。

资源

通用

标准

标准 状态 备注
WHATWG HTML Living Standard
Canvas
Living Standard  
HTML5
Canvas
Recommendation  

其它相关

文档标签和贡献者

标签: 
 此页面的贡献者: fscholz, ziyunfei, cuixiping, bqdove, LinusYu, ethertank, leegorous
 最后编辑者: fscholz,