<canvas>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<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

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

JavaScript

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

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

结果

无障碍

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

规范

Specification
HTML
# the-canvas-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
canvas
height
moz-opaque
DeprecatedNon-standard
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

参见