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

---
title: <canvas>
slug: Web/HTML/Element/canvas
translation_of: Web/HTML/Element/canvas
---
<p>這個 <strong>HTML <code>&lt;canvas&gt;</code> 元素</strong> 可以被使用於對腳本程式(JaveScript) 繪圖 .舉例來說, 它能用來畫圖,組合照片,甚至作動畫. 你也許(應該) 在&lt;canvas&gt;區段內提供替代方案的內容 .這內容將能被一些不支援&lt;canvas&gt;以及無法使用Javescript功能的瀏覽器所渲染 .</p>

<p>更多文章關於canvas, 請參考 <a href="/en-US/docs/Web/API/Canvas_API">canvas 主題</a></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content 分類</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">流程式content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">段落式content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Embedded_content">強調式content</a>, 可見式 content.</td>
  </tr>
  <tr>
   <th scope="row">
    <p>被允許通過的內容</p>
   </th>
   <td>
    <p>除了子元素不是 &lt;a&gt;的元素、 &lt;button&gt;的元素、&lt;input&gt;的元素屬性是<code>checkbox</code>, <code>radio</code>, 或 <code>button</code> 之外且是透明內容模型但不是<a href="/en-US/docs/HTML/Content_categories#Interactive_content">互動式content</a></p>
   </td>
  </tr>
  <tr>
   <th scope="row">Tag 省略</th>
   <td>不能省略標籤&lt;canvas&gt; &lt;/canvas&gt;</td>
  </tr>
  <tr>
   <th scope="row">被允許通過的父親元素</th>
   <td>
    <p>任何<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">強調式content</a>的元素皆可通過</p>
   </td>
  </tr>
  <tr>
   <th scope="row">DOM 介面</th>
   <td>HTMLCanvasElement</td>
  </tr>
 </tbody>
</table>

<h2 id="屬性">屬性</h2>

<p>這個元素的屬性包含全域屬性</p>

<dl>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>在CSS 中以 pixels 表示 座標的空間<strong>高度</strong>（預設是150）</dd>
 <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt>
 <dd>讓canvas知道這個因素是否為半透明的。如果 canvas 知道不是半透明，則提高繪畫的效能</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>在CSS 中以 pixels 表示 座標的空間<strong>寬度</strong>（預設是300）</dd>
</dl>

<h2 id="描述">描述</h2>

<h3 id="需要_&lt;canvas>_結尾">需要 <code>&lt;/canvas&gt;</code> 結尾</h3>

<p>與&lt;img&gt;不同之處,<code>&lt;canvas&gt;</code>需要<code>&lt;/canvas&gt;</code> 結尾</p>

<h3 id="canvas的大小設置">canvas的大小設置</h3>

<p>canvas的大小設置可透過樣式表（stylesheet）被改變。可經由樣式修改圖像的縮放大小。</p>

<p>若呈現的效果圖似乎是扭曲變形的，可試著先修改<code>&lt;canvas&gt;</code>標籤中的<code>width</code>和<code>height</code>的屬性，而<strong>不建議</strong>使用css去控制。</p>

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

<p>將下面這條範例加到你的HTML文件。如果你的瀏覽器並不支援canvas 或不能讀取canvas 時，則會回報canvas中的訊息。若想知道更多有用的回應訊息或替代DOM的註文，可以<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">參考更多相似的註文</a>。</p>

<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
  抱歉，你的瀏覽器並不支援&lt;canvas&gt;元素
&lt;/canvas&gt;
</pre>

<p>如果你的canvas沒有使用透明度，可在&lt;canvas&gt;標籤設立<code>moz-opaque</code>屬性，提升它的繪圖效果。<code>moz-opaque</code> 尚未標準化，所以只適用在 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">規格</th>
   <th scope="col">狀態</th>
   <th scope="col">註解</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="瀏覽器相容性">瀏覽器相容性</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] Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas width and height were signed integers instead of unsigned integers.</p>

<p>[2] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.</p>

<p>[3] Before Gecko 12.0 {{geckoRelease("12.0")}}, if JavaScript is disabled, the <code>&lt;canvas&gt;</code> element was being rendered instead of showing the fallback content as per the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>. Now the fallback content is rendered instead.</p>

<p>[4] See the <a href="http://www.opera.com/docs/changelogs/windows/900/">changelog for Opera 9.0</a>.</p>

<p>[5] 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. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.</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/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li>
</ul>

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