<canvas>は、グラフィックを描くためにスクリプト言語（通常はJavaScript）で使用できる新しいHTML要素です。たとえば、画像を描画したり、画像を統合したり、シンプルな（それほどシンプルではない）アニメーションを行うために使用できます。右側の画像には、<canvas>のアプリケーションの例が表示されており、このチュートリアルに実装が表示されます。
<canvas>は、AppleのMac OS Xダッシュボードで最初に導入され、その後Safariに適用されました。 Firefox 1.5などのGecko1.8に基づくブラウザも、この新しい要素をサポートしています。要素<canvas>は、Whatwg Webアプリケーション1.0の一部であり、HTML 5標準仕様であるすべての人に知られています。
このチュートリアルでは、独自のWebページで<canvas>要素を使用する方法を説明します。提供されている例は、いくつかの明確な概念、つまり<canvas>でできることを提供する必要があります。これらの例は、アプリケーション<canvas>の出発点としても機能します。
使用を開始する前に
HTMLとJavaScriptの基本的な知識がある限り、要素<canvas>を使用することは難しくありません。
上記のように、すべての最新のブラウザが<canvas>要素をサポートしているわけではないため、Firefox 1.5以降、またはOpera 9などの他のGeckoベースのブラウザや、すべての例のアクションを確認するために最近のSafariの最近のバージョンが必要です。
<canvas>要素
<canvas>要素自体を見て、このチュートリアルを始めましょう。
<canvas>要素の定義から始めましょう。
<キャンバスID =チュートリアル幅= 150高さ= 150> </canvas>
これは<img>要素によく似ていますが、唯一の違いは、SRCおよびALT属性がないことです。 <canvas> <img>によく似ているように見えますが、唯一の違いは、SRCおよびALT属性がないことです。 <canvas>要素には、幅と高さの2つの属性しかありません。これらはどちらもオプションであり、DOMプロパティまたはCSSルールを使用して設定することもできます。幅と高さの属性が指定されていない場合、キャンバスは最初は幅300ピクセル、高さ150ピクセルになります。この要素はCSSによって任意にサイズを付けることができますが、レンダリング中に画像はレイアウトサイズに合うようにスケーリングされます。 （レンダリングが歪んでいるように見える場合は、<canvas>属性ではなく<canvas>属性で幅と高さの属性を明示的に指定してみてください。）キャンバスのサイズはCSSでサイズを変更できますが、レンダリングイメージはレイアウトに適応するためにスケーリングできます（レンダリング結果は、レンダリングの結果が見られます。キャンバス）。
ID属性は<canvas>要素に固有ではありませんが、すべてのHTML要素（たとえばクラスなど）に（ほぼ）適用できるデフォルトのHTML属性の1つです。 IDを提供することは常に良い考えです。これにより、スクリプトでそれを識別するのがはるかに簡単になります。
ID属性は<canvas>に排他的ではありません。標準のHTMLタグと同様に、HTML要素はすべてID値を指定できます。一般的に、要素のIDを指定することをお勧めします。これにより、スクリプトで適用しやすくなります。
<canvas>要素は、通常の画像（マージン、境界、背景など）と同じようにスタイリングできます。ただし、これらのルールは、キャンバスの実際の図面に影響しません。このチュートリアルの後半でこれがどのように行われるかを確認します。キャンバスにスタイリングルールが適用されない場合、最初は完全に透明になります。 <canvas>要素は、通常の画像（マージン、境界、背景など）と同じようにスタイリングできます。ただし、これらのルールは、キャンバスの実際の図面に影響しません。このチュートリアルの後半でこれがどのように行われるかを確認します。キャンバスにスタイリングルールが適用されない場合、最初は完全に透明になります。 <canvas>要素は、通常の画像（マージン、境界線、背景など）と同じようにスタイリングできます。ただし、これらのスタイルは、キャンバスによって生成された実際の画像に影響を与えません。以下に、スタイルを適用する方法について説明します。スタイルを指定しない場合、キャンバスはデフォルトで完全に透過的です。
<canvas>要素はまだ比較的新しいものであり、一部のブラウザー（Firefox 1.0やInternet Explorerなど）に実装されていないため、ブラウザーが要素をサポートしていない場合にフォールバックコンテンツを提供する手段が必要です。
<canvas>は比較的新しいため、Firefox 1.0やInternet Explorerなど、一部のブラウザは実装していないため、Canvasをサポートしないブラウザーに代替ディスプレイコンテンツを提供する必要があります。
幸運なことに、これは非常に簡単です。キャンバス要素内で代替コンテンツを提供するだけです。それをサポートしていないブラウザは、要素を完全に無視し、フォールバックコンテンツをレンダリングします。
たとえば、Canvasコンテンツのテキスト説明を提供したり、動的にレンダリングされたコンテンツの静的な画像を提供したりできます。これは次のようになります：
代替コンテンツをCanvas要素に直接挿入する必要があります。 CanvasをサポートしないブラウザはCanvas Elementsを無視し、代替コンテンツを直接レンダリングしますが、サポートされているブラウザーはCanvasを正常にレンダリングします。たとえば、代替コンテンツとしていくつかのテキストや写真をキャンバスに記入できます。
<Canvas ID = StockGraph幅= 150高さ= 150>現在の株価：$ 3.15 +0.15 </canvas> <canvas> <canvas id = 150 height = 150> <img src = img src/clock.png width = 150 height = 150/> </canvas>
Apple Safariの実装では、<canvas>は、ほぼ同じ方法で実装された要素です。エンドタグはありません。ただし、<canvas>にはWebで広く使用されるには、フォールバックコンテンツの施設を提供する必要があります。したがって、Mozillaの実装にはEnd Tag（</canvas>）が必要です。
Apple Safariでは、<canvas>の実装は<img>に非常に似ており、エンドタグはありません。ただし、<canvas>がWebの世界で広く適用できるためには、代替コンテンツの場所を提供する必要があるため、Mozillaの実装でタグ（</canvas>）を終了する必要があります。
フォールバックコンテンツが不要な場合、単純な<キャンバスID = foo ...> </canvas>は、SafariとMozillaの両方と完全に互換性があります。Safariは単にENDタグを無視します。
代替がない場合、<canvas id = foo ...> </canvas>はSafariとMozillaと完全に互換性があります。Safariは単にエンドタグを無視します。
フォールバックコンテンツが必要な場合、一部のCSSトリックを使用して、Safari（キャンバスのみをレンダリングするはずです）からフォールバックコンテンツをマスクし、CSSトリックをIE（フォールバックコンテンツをレンダリングするはずです）からマスクする必要があります。
代替コンテンツがある場合は、いくつかのCSSトリックを使用して、Safariの代替コンテンツのみを非表示にすることができます。これらの代替コンテンツはIEで表示する必要がありますが、Safariでは表示されません。
<canvas>は、表示されているコンテンツを作成および操作するために使用される1つ以上のレンダリングコンテキストを公開する固定サイズの図面表面を作成します。現在定義されている唯一のレンダリングコンテキストである2Dレンダリングコンテキストに焦点を当てます。将来、他のコンテキストはさまざまなタイプのレンダリングを提供する可能性があります。たとえば、OpenGL ESに基づく3Dコンテキストが追加される可能性があります。
<canvas>によって作成された固定サイズの図面画面は、1つ以上のレンダリングコンテキストを開き、それを通じて表示するものを制御できます。現在の唯一のオプションでもある2Dレンダリングに焦点を当てており、将来のOpenGL ESに基づいて3Dコンテキストを追加する可能性があります。
<canvas>は最初は空白であり、スクリプトが最初にレンダリングコンテキストにアクセスしてそれを描画するために必要なものを表示するために表示されます。 Canvas要素には、getContextと呼ばれるDOMメソッドがあり、レンダリングコンテキストとその描画関数を取得するために使用されます。 getContext（）は、コンテキストのタイプである1つのパラメーターを取得します。
<canvas>の初期化は空白です。スクリプトを描画するには、まずレンダリングコンテキストが必要です。 Canvas ElementオブジェクトのgetContextメソッドを介して取得できます。同時に、描画のためにいくつかの関数が取得されます。 getContext（）は、そのタイプを引数として説明する値を受け入れます。
var canvas = document.getElementById（ 'チュートリアル'）; var ctx = canvas.getContext（ '2d'）;
最初の行では、getrementbyidメソッドを使用してキャンバスドムノードを取得します。その後、getContextメソッドを使用して描画コンテキストにアクセスできます。
上記の最初の行は、getElementByIDメソッドを介してキャンバスオブジェクトのDOMノードを取得します。次に、描画操作コンテキストは、GetContextメソッドを使用して取得されます。
フォールバックコンテンツは、<canvas>をサポートしないブラウザーに表示されます。スクリプトは、実行時にサポートを確認することもできます。これは、getContextメソッドをテストすることで簡単に実行できます。上からのコードスニペットは次のようになります：
サポートされていないブラウザに代替コンテンツを表示することに加えて、ブラウザがスクリプトを介してキャンバスをサポートするかどうかを確認することもできます。この方法は非常に単純です。GetContextが存在するかどうかを判断してください。
var canvas = document.getElementById（ 'チュートリアル'）; if（canvas.getContext）{var ctx = canvas.getContext（ '2d'）; //ここに描画コード} else {// Canvas-Unsupportedコードはこちら}ここにミニマルなテンプレートがあります。これは、後の例の出発点として使用します。このファイルをダウンロードして、システムで動作できます。
以下の最も簡単なコードテンプレート（後続の例に必要）から始め、ローカルで使用するファイルをダウンロードできます。
<html> <head> <title> canvasチュートリアル</title> <スクリプトタイプ= text/javascript> function draw（）{var canvas = document.getElementById（ 'Tutorial'）; if（canvas.getContext）{var ctx = canvas.getContext（ '2d'）; }} </script> <style type = text/css> canvas {border：1px solid black; } </style> </head> <body onload = draw（）;> <canvas id =チュートリアル幅= 150 height = 150> </canvas> </body> </html>スクリプトを見ると、drawという関数が作成されました。ページが終了したら実行されます（ボディタグのonload属性を介して）。この関数は、ページが最初にロードされているのと同じ長さと同じように、SetimeOut、SetInterval、またはその他のイベントハンドラー機能から呼び出された可能性もあります。
注意している場合は、ページがロードされた後に（ボディタグのオンロードプロパティを設定することにより）drawという関数を作成したことがわかります。もちろん、Settimeout、SetInterval、またはその他のイベント処理機能でも呼ばれます。
まず、2つの交差する長方形を描く簡単な例を紹介します。これが後の例でより詳細にどのように機能するかを調べます。
まず、簡単に見てみましょう - 2つのインターレースの長方形を描画します。そのうちの1つはアルファ透明な効果があります。次の例で、それがどのように機能するかを詳細に見てみましょう。
<html> <head> <script type = application/x-javascript> function draw（）{var canvas = document.getElementbyId（canvas）; if（canvas.getContext）{var ctx = canvas.getContext（2d）; ctx.fillstyle = rgb（200,0,0）; ctx.fillrect（10、10、55、50）; ctx.fillstyle = rgba（0、0、200、0.5）; ctx.fillrect（30、30、55、50）; }} </script> </head> <body onload = draw（）;> <canvas id = canvas width = 150 height = 150> </canvas> </body> </html>