HTML <canvas> 元素

使用HTML <canvas> 元素和canvas 脚本 API中可以绘制图形和动画。

通过 <canvas> 元素来显示一个绿色的矩形：

<canvas id="my-canvas"></canvas>

<script>
  var canvas = document.getElementById('my-canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 80, 100);
</script>

尝试一下 »

特性

内容类别	流式内容，短语内容，嵌入内容，可触知内容。
允许的内容	透明内容模型，但子元素不能包含 <a> 元素，<button> 元素，type 属性为 checkbox，radio 或 button 的 <input> 元素之外的交互内容。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受 短语内容 的元素。
允许的 ARIA 角色	任意
DOM 接口	HTMLCanvasElement

属性

该元素包含了全局属性。

height

该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。

moz-opaque

表示画布是否为半透明，如果不是半透明，则可以优化绘画性能。

width

该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

事件属性

<canvas> 标签支持 HTML 的事件属性。

使用注意

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

替代的内容

您可以（或应该）在 <canvas> 块内提供替代的内容。该内容将在不支持画布的旧浏览器和禁用 JavaScript 的浏览器中呈现。

需要 </canvas> 标签

与 <img> 元素不同，<canvas> 元素需要关闭标签（ </canvas> ）。

设置画布的大小

可以使用样式表更改画布的显示大小。在渲染过程中，图像将被缩放以适应样式大小。如果您的效果图似乎扭曲了，请尝试指定 <canvas> 的 width 和 height 属性，而不是使用 CSS。

更多实例

这代码段将一个 canvas 元素添加到您的 HTML 文档。如果浏览器无法渲染画布，或者如果无法读取画布，则会展示替代的文本。提供有用的替代文本或子 DOM 有助于使画布无障碍访问。

<canvas id="canvas" width="300" height="300">
  描述您画布的展示内容的替代文字。
</canvas>

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 80, 100);
</script>

尝试一下 »

如果您的画布不使用透明度，则在 canvas 标签上设置 moz-opaque 属性。这个信息可以在内部使用来优化渲染。但是，该属性尚未标准化，仅适用于基于 Mozilla 的渲染引擎。

<canvas id="my-canvas" moz-opaque></canvas>

<script>
  var canvas = document.getElementById('my-canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 80, 100);
</script>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <canvas> 的定义	现行的标准	-
HTML5 <canvas> 的定义	推荐	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. 在 Firefox 5 之前，画布宽度和高度是有符号整数，而不是无符号整数。

2. 在 Firefox 6 之前，如果 <canvas> 元素的宽度或高度为 0，将使用默认尺寸渲染。

3. 在 Firefox 12 之前，即使禁用了 JavaScript，<canvas> 元素仍然会被渲染，而不是根据规范显示回退内容。现在则会显示回退内容。

4. 虽然早期版本的 Apple Safari 浏览器不需要关闭标签，但规范表明它是必需的，因此您应该加上关闭标签确保更好的兼容性。那些版本的 Safari（2.0 之前版本）还会显示附加到画布中的回退内容，除非你使用 CSS 技巧来隐藏掉。

相关链接

• Canvas cheat sheet
• Canvas introduction by Apple