Revision 953297 of <canvas>

版本网址缩略名： Web/HTML/Element/canvas
版本标题： <canvas>
版本 id： 953297
创建于： Nov 17, 2015, 3:13:44 AM
创建者： Martin.Chow
是否是当前版本？是
评论改进文法

标签：

修订内容

<canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。

更多关于<canvas>元素内容，参见canvas元素讨论页面.

属性

本元素支持全局属性.

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

注意事项

`需要</canvas>` 标签

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

设置画布(canvas)的大小

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

示例

<canvas id="canvas" width="300" height="300">
  Sorry, your browser doesn't support the &lt;canvas&gt; 

element.
</canvas>

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

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

规范

Specification	Status	Comment
{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas- element', '<canvas>')}}	{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas- element', '<canvas>')}}	{{Spec2('HTML5 W3C')}}	初始定义

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	{{CompatGeckoDesktop("1.8")}}^[1] {{CompatGeckoDesktop("6.0")}}^[2] {{CompatGeckoDesktop("12.0")}}^[3]	9.0	9.0^[4]	2.0^[5]
`moz-opaque`	{{CompatNo}}	{{CompatGeckoDesktop("1.9.1")}}	{{CompatNo}}	{{CompatNo}}	{{CompatNo}}

Feature	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	{{CompatGeckoDesktop("1.8")}}^[1] {{CompatGeckoDesktop("6.0")}}^[2] {{CompatGeckoDesktop("12.0")}}^[3]	{{CompatUnknown}}	{{CompatUnknown}}	{{CompatUnknown}}	1.0
`moz-opaque`	{{CompatGeckoMobile("1.9.1")}}	{{CompatNo}}	{{CompatNo}}	{{CompatNo}}	{{CompatNo}}

[1] Gecko 5.0 {{geckoRelease("5.0")}}内核之前的浏览器，<canvas>元素的宽和高必须被设置为正整数。

[2] Prior to Gecko 6.0 {{geckoRelease("6.0")}},内核之前的浏览器，即使{{HTMLElement ("canvas")}} 元素没有宽或高都将被渲染。

[3] Before Gecko 12.0 {{geckoRelease("12.0")}}内核之前的浏览器，如果javaScript被禁用的话，<canvas>元素依旧会被浏览器渲染，而不是按照标准显示元素标签之间需要显示的内容。而现在正好相反。

[4] 更多请参阅 changelog for Opera 9.0.

[5] 早期版本的Safari浏览器不强制要求<canvas>元素被闭合，但是根据相关规范的要求，仍然强烈建议在编写您自己的HTML文档的时候，确保闭合掉了<canvas>元素。

参阅

修订版来源

<p><strong>&lt;canvas&gt;元素</strong>可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持&lt;canvas&gt;元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。</p>

<p>更多关于&lt;canvas&gt;元素内容，参见<a href="/en-

US/docs/Web/API/Canvas_API">canvas元素讨论页面</a>.</p>

<h2 id="属性"><strong>属性</strong></h2>

<p>本元素支持 <a href="https://developer.mozilla.org/en-

US/docs/HTML/Global_attributes">全局属性</a>.</p>

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

<h2 id="注意事项"><strong>注意事项</strong></h2>

<h3 id="需要&lt;canvas&gt;_标签"><code>需要&lt;/canvas&gt;</code>&nbsp;标签</h3>

<p>不同于&nbsp;{{HTMLElement("img")}} 元素, &nbsp;{{HTMLElement ("canvas")}}元素需要有闭合标签&nbsp;(<code>&lt;/canvas&gt;</code>).</p>

<h3 id="设置画布(canvas)的大小">设置画布(canvas)的大小</h3>

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

<h2 id="示例"><strong>示例</strong></h2>

<pre class="brush: html">
&lt;canvas id="canvas" width="300" height="300"&gt;
  Sorry, your browser doesn't support the &amp;lt;canvas&amp;gt; 

element.
&lt;/canvas&gt;
</pre>

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

<pre class="brush: html">
&lt;canvas id="mycanvas" moz-opaque&gt;&lt;/canvas&gt;</pre>

<h2 id="详述">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas- element', '&lt;canvas&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas- element', '&lt;canvas&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性"><br />
 浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br />
    {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br />
    {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
   <td>9.0</td>
   <td>9.0<sup>[4]</sup></td>
   <td>2.0<sup>[5]</sup></td>
  </tr>
  <tr>
   <td><code>moz-opaque</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br />
    {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br />
    {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>moz-opaque</code></td>
   <td>{{CompatGeckoMobile("1.9.1")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Gecko 5.0&nbsp;{{geckoRelease("5.0")}}内核之前的浏览器，&lt;canvas&gt;元素的宽和高必须被设置为正整数。</p>

<p>[2] Prior to Gecko 6.0 {{geckoRelease("6.0")}},内核之前的浏览器，即使{{HTMLElement ("canvas")}} 元素没有宽或高都将被渲染。</p>

<p>[3] Before Gecko 12.0 {{geckoRelease("12.0")}}内核之前的浏览器，如果javaScript被禁用的话，&lt;canvas&gt;元素依旧会被浏览器渲染，而不是按照标准显示元素标签之间需要显示的内容。而现在正好相反。</p>

<p>[4] 更多请参阅 <a href="https://www.opera.com/docs/changelogs/windows/900/">changelog for Opera 9.0</a>.</p>

<p>[5] 早期版本的Safari浏览器不强制要求&lt;canvas&gt;元素被闭合，但是根据相关规范的要求，仍然强烈建议在编写您自己的HTML文档的时候，确保闭合掉了&lt;canvas&gt;元素。</p>

<h2 id="参阅">参阅</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Canvas_API">MDN canvas portal</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
 <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-

sheet.html">Canvas cheat sheet</a></li>
 <li><a href="/en-US/demos/tag/tech:canvas">Canvas-related demos</a></li>
 <li><a href="https://developer.apple.com/library/safari/documentation/AudioVi

deo/Conceptual/HTML-canvas-

guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li>
</ul>

<div>{{HTMLRef}}</div>

恢复到这个版本