<canvas>: The Graphics Canvas element

HTML <canvas>元素画布脚本APIWebGL API结合使用以绘制图形和动画.

Content categories 流内容短语内容嵌入内容 ,可触知内容.
允许的内容 透明,但除了type属性为checkboxradiobutton <a>元素, <button>元素, <input>元素之外,没有任何交互式内容后代.
标签遗漏 None, both the starting and ending tag are mandatory.
准父母 接受短语内容的任何元素.
允许的ARIA角色 Any
DOM介面 HTMLCanvasElement

Attributes

该元素的属性包括全局属性 .

height
坐标空间的高度(以CSS像素为单位). 默认值为150.
moz-opaque
让画布知道半透明性是否会成为一个因素. 如果画布知道没有透明感,则可以优化绘画性能. 仅基于Mozilla的浏览器支持此功能. 请使用标准化的canvas.getContext('2d', { alpha: false }) .
width
坐标空间的宽度(以CSS像素为单位). 默认为300.

Usage notes

Alternative content

您可以(并且应该)在<canvas>块中提供替代内容. 该内容将在不支持画布的旧版浏览器和禁用JavaScript的浏览器中呈现. 提供有用的后备文本或子DOM有助于使画布更易于访问 .

Required </canvas> tag

<img>元素不同, <canvas>元素需要结束标记( </canvas> ).

Sizing the canvas using CSS versus HTML

画布的显示大小可以使用CSS进行更改,但是如果执行此操作,则在渲染过程中会缩放图像以适合样式大小,这会使最终的图形渲染最终失真.

最好通过直接在<canvas>元素上设置widthheight属性(直接在HTML中或使用JavaScript)来指定画布尺寸.

Maximum canvas size

<canvas>元素的最大大小非常大,但是确切的大小取决于浏览器. 以下是我们从各种测试和其他来源(例如Stack Overflow )收集的一些数据:

Browser 最大高度 最大宽度 最大面积
Chrome 32,767像素 32,767像素 268,435,456像素(即16,384 x 16,384)
Firefox 32,767像素 32,767像素 472,907,7​​76像素(即22,528 x 20,992)
Safari 32,767 pixels 32,767像素 268,435,456像素(即16,384 x 16,384)
IE 8,192像素 8,192像素 ?

注意 :超过最大尺寸或面积会使画布无法使用-绘图命令将不起作用.

Examples

HTML

此代码段将canvas元素添加到HTML文档. 如果浏览器无法渲染画布或无法读取画布,则提供备用文本.

<canvas id="canvas" width="300" height="300"> 
  An alternative text describing what your canvas displays. 
</canvas> 

JavaScript

然后在JavaScript代码中,调用HTMLCanvasElement.getContext()以获取绘图上下文并开始在画布上绘图:

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

Result

Accessibility concerns

Alternative content

<canvas>元素本身只是一个位图,并不提供有关任何绘制对象的信息. Canvas内容不像语义HTML那样适用于可访问性工具. 通常,应避免在可访问的网站或应用程序中使用画布. 以下指南可帮助使其更易于访问.

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<canvas>' in that specification.
生活水平
HTML5
The definition of '<canvas>' in that specification.
Recommendation 初始定义

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxIE浏览器OperaSafariAndroid Webview适用于Android的ChromeAndroid版Firefox适用于Android的OperaiOS上的Safari三星上网
canvasChrome 全力支持 1Edge 全力支持 12Firefox 全力支持 1.5
Notes
Full support 1.5
Notes
笔记 在Firefox 5之前,画布的宽度和高度是带符号的整数,而不是无符号的整数.
笔记 在Firefox 6之前,宽度或高度为零的<canvas>元素将呈现为默认尺寸.
笔记 在Firefox 12之前,如果禁用了JavaScript,则会呈现<canvas>元素,而不是按照规范显示后备内容. 从那时起,将显示后备内容.
IE 全力支持 9Opera 全力支持 9Safari 全力支持 2
Notes
Full support 2
Notes
笔记 尽管Apple的Safari浏览器的早期版本不需要结束标记,但规范表明它是必需的,因此,为确保最广泛的兼容性,应确保将其包括在内. Safari 2之前的版本将在画布本身之外显示回退的内容,除非您使用CSS技巧来掩盖它.
WebView Android 全力支持 37Chrome Android 全力支持 18Firefox Android 全力支持 4
Notes
Full support 4
Notes
笔记 在Firefox 5之前,画布的宽度和高度是带符号的整数,而不是无符号的整数.
笔记 在Firefox 6之前,宽度或高度为零的<canvas>元素将呈现为默认尺寸.
笔记 在Firefox 12之前,如果禁用了JavaScript,则会呈现<canvas>元素,而不是按照规范显示后备内容. 从那时起,将显示后备内容.
Opera Android 全力支持 10.1Safari iOS 全力支持 1三星互联网安卓 全力支持 1.0
heightChrome 全力支持 1Edge 全力支持 12Firefox 全力支持 1.5
Notes
Full support 1.5
Notes
笔记 在Firefox 5之前,画布的宽度和高度是带符号的整数,而不是无符号的整数.
笔记 在Firefox 6之前,宽度或高度为零的<canvas>元素将呈现为默认尺寸.
笔记 在Firefox 12之前,如果禁用了JavaScript,则会呈现<canvas>元素,而不是按照规范显示后备内容. 从那时起,将显示后备内容.
IE 全力支持 9Opera 全力支持 9Safari 全力支持 2
Notes
Full support 2
Notes
笔记 尽管Apple的Safari浏览器的早期版本不需要结束标记,但规范表明它是必需的,因此,为确保最广泛的兼容性,应确保将其包括在内. Safari 2之前的版本将在画布本身之外显示回退的内容,除非您使用CSS技巧来掩盖它.
WebView Android 全力支持 37Chrome Android 全力支持 18Firefox Android 全力支持 4
Notes
Full support 4
Notes
笔记 在Firefox 5之前,画布的宽度和高度是带符号的整数,而不是无符号的整数.
笔记 在Firefox 6之前,宽度或高度为零的<canvas>元素将呈现为默认尺寸.
笔记 在Firefox 12之前,如果禁用了JavaScript,则会呈现<canvas>元素,而不是按照规范显示后备内容. 从那时起,将显示后备内容.
Opera Android 全力支持 10.1Safari iOS 全力支持 1三星互联网安卓 全力支持 1.0
moz-opaque
Non-standard
Chrome 没有支持 NoEdge 没有支持 NoFirefox Full support 3.5IE 没有支持 NoOpera 没有支持 NoSafari 没有支持 NoWebView Android 没有支持 NoChrome Android 没有支持 NoFirefox Android 全力支持 4Opera Android 没有支持 NoSafari iOS 没有支持 No三星互联网安卓 没有支持 No
widthChrome 全力支持 1Edge 全力支持 12Firefox 全力支持 1.5
Notes
Full support 1.5
Notes
笔记 在Firefox 5之前,画布的宽度和高度是带符号的整数,而不是无符号的整数.
笔记 在Firefox 6之前,宽度或高度为零的<canvas>元素将呈现为默认尺寸.
笔记 在Firefox 12之前,如果禁用了JavaScript,则会呈现<canvas>元素,而不是按照规范显示后备内容. 从那时起,将显示后备内容.
IE 全力支持 9Opera 全力支持 9Safari 全力支持 2
Notes
Full support 2
Notes
笔记 尽管Apple的Safari浏览器的早期版本不需要结束标记,但规范表明它是必需的,因此,为确保最广泛的兼容性,应确保将其包括在内. Safari 2之前的版本将在画布本身之外显示回退的内容,除非您使用CSS技巧来掩盖它.
WebView Android 全力支持 37Chrome Android 全力支持 18Firefox Android 全力支持 4
Notes
Full support 4
Notes
笔记 在Firefox 5之前,画布的宽度和高度是带符号的整数,而不是无符号的整数.
笔记 在Firefox 6之前,宽度或高度为零的<canvas>元素将呈现为默认尺寸.
笔记 在Firefox 12之前,如果禁用了JavaScript,则会呈现<canvas>元素,而不是按照规范显示后备内容. 从那时起,将显示后备内容.
Opera Android 全力支持 10.1Safari iOS 全力支持 1三星互联网安卓 全力支持 1.0

Legend

Full support  
全力支持
No support  
没有支持
Non-standard. Expect poor cross-browser support.
非标. 预期跨浏览器支持不佳.
See implementation notes.
请参阅实施说明.

See also