Revision 507883 of canvas 要素

<h2 id="Summary" name="Summary">概要</h2>
<p>HTML の canvas 要素 (<code>&lt;canvas&gt;</code>) は、スクリプティング（基本的には <a href="/ja/docs/JavaScript">JavaScript</a>）によりグラフィックを描画する事ができます。 たとえば、グラフの描画、写真の合成、更にはアニメーションの作成までが可能です。<code>&lt;canvas&gt;</code> のブロック内で、代替コンテンツを提供することが可能 (また、提供すべき) です。その内容物は、canvas をサポートしない古いブラウザ<strong>および</strong> JavaScript が無効であるブラウザで描画されます。</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> 以下に挙げた要素を除く <a href="/ja/docs/HTML/Content_categories#Interactive_content">インタラクティブコンテンツ</a> を子孫に持たないトランスパレントコンテンツ: {{HTMLElement("a")}} 要素、{{HTMLElement("button")}} 要素、{{htmlattrxref("type", "input")}} 属性が <code>checkbox</code>、<code>radio</code>、<code>button</code> のいずれかである {{HTMLElement("input")}} 要素</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;
  Sorry, your browser doesn't support the &amp;lt;canvas&amp;gt; element.
&lt;/canvas&gt;
</pre>
<p>{{yakuchu("<code>canvas</code> 要素の内容には代替コンテンツを含める事ができます。 <code>canvas</code> 要素に対応したブラウザではこの内容は表示されず、非対応ブラウザでの閲覧時にのみ表示されます。")}}</p>
<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>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>基本サポート</td>
    <td>1.0</td>
    <td>{{CompatGeckoDesktop("1.8")}}</td>
    <td>9.0</td>
    <td><a href="https://www.opera.com/docs/changelogs/windows/900/">9.0</a></td>
    <td><a href="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>
 {{HTMLRef}}</div>