path: root/files/zh-cn/web/html/element/canvas/index.html

---
title: <canvas>
slug: Web/HTML/Element/canvas
tags:
  - Canvas
  - HTML
  - HTML5
  - Web
translation_of: Web/HTML/Element/canvas
---
<p><code>&lt;canvas&gt;</code>元素可被用来通过JavaScript（<a href="/zh-CN/docs/Web/API/Canvas_API">Canvas</a> API 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API">WebGL</a> API）绘制图形及图形动画。</p>

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

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

<h3 id="标签需要闭合">标签需要闭合</h3>

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

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

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

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

<h3 id="最大的画布尺寸">最大的画布尺寸</h3>

<p>画布的最大的尺寸取决于浏览器，下表的结论来自别处 (e.g. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a>):</p>

<table>
 <thead>
  <tr>
   <th scope="col">浏览器</th>
   <th scope="col">最大高度</th>
   <th scope="col">最大宽度</th>
   <th scope="col">最大面积</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Chrome</td>
   <td>32,767 pixels</td>
   <td>32,767 pixels</td>
   <td>268,435,456 pixels (i.e., 16,384 x 16,384)</td>
  </tr>
  <tr>
   <td>Firefox</td>
   <td>32,767 pixels</td>
   <td>32,767 pixels</td>
   <td>472,907,776 pixels (i.e., 22,528 x 20,992)</td>
  </tr>
  <tr>
   <td>Safari</td>
   <td>32,767 pixels</td>
   <td>32,767 pixels</td>
   <td>268,435,456 pixels (i.e., 16,384 x 16,384)</td>
  </tr>
  <tr>
   <td>IE</td>
   <td>8,192 pixels</td>
   <td>8,192 pixels</td>
   <td>?</td>
  </tr>
 </tbody>
</table>

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
  抱歉，您的浏览器不支持canvas元素
  （这些内容将会在不支持&lt;canvas&gt;元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现）
&lt;/canvas&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<p>使用{{domxref("HTMLCanvasElement.getContext()")}}获得一个绘图上下文并开始绘制</p>

<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample('示例')}}</p>

<h2 id="可访问性">可访问性</h2>

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

<ul>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li>
 <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
 <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
 <li><a href="https://developer.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
 <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
</ul>

<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></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="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat("html.elements.canvas")}}</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>