MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

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

示例

这只是一个使用 CanvasRenderingContext2D.fillRect() 方法简单的代码片段。

HTML

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

JavaScript

"use strict"
let canvas = document.getElementById("canvas"),
    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绘制图形 
结合<video>和 <canvas>来实现实时操作视频数据。

资源

通用

标准

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

其它相关

文档标签和贡献者

标签: 
 最后编辑者: ArcherGrey,