Revision 410105 of canvas 要素

<div>
  {{HTMLVersionHeader("5")}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p>HTML の canvas 要素 (<code>&lt;canvas&gt;</code>) は、スクリプティング（基本的には <a href="/ja/docs/JavaScript">JavaScript</a>）によりグラフィックを描画する事ができます。 たとえば、グラフの描画、写真の合成、更にはアニメーションの作成までが可能です。</p>
<p>canvas についての詳しい記事は、<a href="/ja/docs/Web/HTML/Canvas">トピックページ</a>をご覧ください。</p>
<ul class="htmlelt">
  <li><dfn><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></dfn> <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">フレージングコンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>、パルパブルコンテンツ</li>
  <li><dfn>許可された内容</dfn> Transparent but with no <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a> descendants except for {{HTMLElement("a")}} elements, {{HTMLElement("button")}} elements, {{HTMLElement("input")}} elements whose {{htmlattrxref("type", "input")}} attribute is <code>checkbox</code>, <code>radio</code>, or <code>button</code>.</li>
  <li><dfn>タグの省略</dfn> {{no_tag_omission}}</li>
  <li><dfn>許可された親要素</dfn> <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">フレージングコンテンツ</a>を受け入れる全ての要素</li>
  <li><dfn>DOM インタフェース</dfn> {{domxref("HTMLCanvasElement")}}</li>
</ul>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>他の全ての HTML 要素と同様に、<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p>
<dl>
  <dt>
    {{htmlattrdef("width")}}</dt>
  <dd>
    座標空間の幅。デフォルトでは 300 ピクセルに設定されています。</dd>
  <dt>
    {{htmlattrdef("height")}}</dt>
  <dd>
    座標空間の高さ。デフォルトでは 150 ピクセルに設定されています。</dd>
</dl>
<p>{{Note("canvas 要素のサイズはスタイルシートを用いて変更可能です。画像はレンダリング中のスタイルのサイズに合わせてスケーリングされます。")}}</p>


<h2 id="Examples" name="Examples">例</h2>

<pre class="brush:html">
&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>

<p>{{yakuchu("<code>canvas</code> 要素の内容には代替コンテンツを含める事ができます。 <code>canvas</code> 要素に対応したブラウザではこの内容は表示されず、非対応ブラウザでの閲覧時にのみ表示されます。")}}</p>

<pre class="brush:html">
&lt;canvas id="canvas" width="300" height="300"&gt;
  &lt;img src="https://example.com/common/image/alt.png" width="300" height="150" /&gt;
&lt;/canvas&gt;</pre>



<h2 id="Specifications" name="Specifications">仕様</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>&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>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{CompatGeckoDesktop("1.8")}}</td>
        <td>1.0</td>
        <td>9.0</td>
        <td><a class="external" href="https://www.opera.com/docs/changelogs/windows/900/" title="https://www.opera.com/docs/changelogs/windows/900/">9.0</a></td>
        <td><a class="external" href="https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html" title="https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">2.0</a></td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{CompatGeckoMobile("1.8")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Browser-specific_notes" name="Browser-specific_notes">実装に関する注記</h3>
<h4 id="Firefox_(Gecko)" name="Firefox_(Gecko)">Firefox (Gecko)</h4>
<ul>
  <li>Gecko 5.0 {{geckoRelease("5.0")}} 以前では、<code>&lt;canvas&gt;</code> 要素の高さと幅は符号無し整数でなく符号付き整数でした。</li>
  <li>Gecko 6.0 {{geckoRelease("6.0")}} 以前では、高さと幅が 0 の <code>&lt;canvas&gt;</code> 要素がデフォルトの寸法で描画されていました。</li>
  <li>Gecko 12.0 {{geckoRelease("12.0")}} より前のバージョンでは <code>&lt;canvas&gt;</code> 要素は、JavaScript 無効時に表示するように<a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">仕様書</a>で定められている代替コンテンツを表示しませんでした。これは現在のバージョンでは修正されています。</li>
</ul>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li><a href="/ja/docs/Web/HTML/Canvas">Canvas トピックページ</a></li>
  <li><a href="/ja/docs/Web/HTML/Canvas_tutorial">Canvas チュートリアル</a></li>
  <li><a class="external" href="https://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas チートシート</a></li>
  <li><a href="/ja/demos/tag/tech:canvas">Canvas のデモ | Demo Studio | MDN</a></li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>