direktori cari
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
watak

<canvas>元素可被用来通过脚本(通常是JavaScript)绘制图形。

内容类别

流量内容,措辞内容,嵌入内容,可触及的内容。

允许的内容

除<元素,<按钮>元素,<type>属性为复选框,收音机或按钮的<input>元素外,透明但没有交互式内容的后代。

标记遗漏

没有,起始和结束标签都是强制性的。

允许父母

任何接受phrasing_content的元素。

允许ARIA角色

任何

DOM界面

HTMLCanvasElement

属性

本元素支持 全局属性.

height该元素占用空间的高度,以 CSS 像素(px)表示,默认为 150。

moz-opaque通过设置这个属性,来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明,使用这个元素将可以优化浏览器绘图性能。

width该元素占用空间的宽度,以 CSS 像素(px)表示,默认为 300。

注意事项

可替代的内容

你可以(也应该)在<canvas>块内提供备用内容。该内容将在不支持画布的旧浏览器和禁用JavaScript的浏览器中呈现。

需要</canvas> 标签

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

设置画布(canvas)的大小

可以通过CSS来控制<canvas>的大小。在渲染的过程中<canvas>元素中的内容会根据情况缩放来适应需要的大小。如果您发现<canvas>元素中展示的内容变形,您可以通过<canvas>自带的height和width属性进行相关设置,而不要使用CSS。

示例

这个代码片段为您的HTML文档添加一个画布元素。如果浏览器无法渲染画布,或者无法读取画布,则会提供后备文本。提供有用的后备文本或子DOM,更易于访问画布。

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

如果你没有设置<canvas>元素的透明度,可以考虑使用moz-opaque属性。下面给出的示例代码可用于页面渲染优化。但需要您注意的是,这个属性目前还没有被推广开来,只能在基于Mozilla内核的浏览器内生效。

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

规范

规范

状态

评论

HTML生活标准该规范中'<canvas>'的定义。

生活水平


HTML5该规范中'<canvas>'的定义。

建议

初始定义

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

1

(Yes)

1.51 2 3

9

9

24

height

1

(Yes)

1.51 2 3

9

9

24

moz-opaque

No

No

3.5

No

No

No

width

1

(Yes)

1.51 2 3

9

9

24

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

?

?

(Yes)

1.51 2 3

?

No

1

height

?

?

(Yes)

1.51 2 3

?

No

1

moz-opaque

No

No

No

1

No

No

No

width

?

?

(Yes)

1.51 2 3

?

No

1

Artikel sebelumnya: Artikel seterusnya: