<canvas>

<canvas>元素可被用来通过JavaScript(Canvas API 或 WebGL API)绘制图形及图形动画。

属性

本元素支持 全局属性.

height
该元素占用空间的高度,以 CSS 像素(px)表示,默认为 150。
moz-opaque
通过设置这个属性,来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明,使用这个元素将可以优化浏览器绘图性能。
width
该元素占用空间的宽度,以 CSS 像素(px)表示,默认为 300。

注意事项

标签需要闭合

不同于 <img> 元素,  <canvas>元素需要有闭合标签 (</canvas>).

设置画布(canvas)的大小

直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸,这将改变一个画布的水平像素和垂直像素数,就像定义了一张图片的大小一样。

可以使用CSS的width和height以在渲染期间缩放图像以适应样式大小,就像<img>元素一样。如果您发现<canvas>元素中展示的内容变形,您可以通过<canvas>自带的height和width属性进行相关设置,而不要使用CSS。

最大的画布尺寸

画布的最大的尺寸取决于浏览器,下表的结论来自别处 (e.g. Stack Overflow):

浏览器 最大高度 最大宽度 最大面积
Chrome 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384)
Firefox 32,767 pixels 32,767 pixels 472,907,776 pixels (i.e., 22,528 x 20,992)
Safari 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384)
IE 8,192 pixels 8,192 pixels ?

示例

HTML

<canvas id="canvas" width="300" height="300"> 
  抱歉,您的浏览器不支持canvas元素
  (这些内容将会在不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现)
</canvas>

JavaScript

使用HTMLCanvasElement.getContext()获得一个绘图上下文并开始绘制

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

结果

可访问性

<canvas> 元素本身只是一个位图,不提供任何绘制对象的信息。画布内容不像HTML那样具有语义并能暴露给可访问性工具。以下指南可以帮助您更方便地访问它。

规范

Specification Status Comment
HTML Living Standard
<canvas>
Living Standard
HTML5
<canvas>
Recommendation 初始定义

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
canvasChrome Full support 1Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Full support 9Opera Full support 9Safari Full support 2
Notes
Full support 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
heightChrome Full support 1Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Full support 9Opera Full support 9Safari Full support 2
Notes
Full support 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
moz-opaque
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 3.5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
widthChrome Full support 1Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
IE Full support 9Opera Full support 9Safari Full support 2
Notes
Full support 2
Notes
Notes Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.
WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
Notes Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
Notes Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.
Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

参阅