コメント：HTML5は新しいラベルを導入し、このラベルで表される領域はキャンバスのようなものです。すべてのグラフィック図面は、最後にこのキャンバスに提示する必要があります。このタグを使用すると、ブラウザのグラフィックの表現力が大幅に改善されました。フラッシュとシルバーライトは脅迫されていると感じますか？
1。<Canvas>タグHTML5は新しい<canvas>タグを導入します。このタグで表される領域はキャンバスのようなもので、最後のすべてのグラフィック図面をこのキャンバスに提示する必要があります。このタグを使用すると、ブラウザのグラフィックの表現力が大幅に改善されました。フラッシュとシルバーライトは脅迫されていると感じますか？
ニュースリンク：GoogleはChrome 7ブラウザの速度を60倍高速にすると主張しています
次のように、<canvas>タグの使用は非常に簡単です。
<canvas>
ブラウザはCanvasタグをサポートしていません
</canvas>
<canvas>タグと通常のHTMLタグに大きな違いはありません。その幅と高さを設定でき、CSSを介して背景色、ボーダースタイルなどを設定できます。
<canvas>タグの詳細については、こちらをご覧ください。
タグの中央にあるコンテンツは、置換コンテンツです。ユーザーのブラウザが<canvas>タグをサポートしていない場合、コンテンツが表示されます。ユーザーのブラウザが<canvas>タグをサポートしている場合、コンテンツは無視されます。
上記の<canvas>コードには、次の効果が表示されます。
ブラウザはCanvasタグをサポートしていません
IEブラウザを使用している場合、プロンプトのみが表示される場合があります。 Google ChromeまたはFirefoxブラウザを使用している場合は、赤い正方形の領域を見ることができます。
2。レンダリングコンテキスト
実際、<canvas>タグでは何もできません。 Windowsプログラミングをプレイした学生は、Windowsで描画する際に、最初にデバイスコンテキストDCを取得する必要があることを知っています。<canvas>タグを描画するときは、レンダリングコンテキストを取得する必要があります。グラフィックは画面上で直接描画されませんが、最初にコンテキスト（コンテキスト）に描かれ、次に画面で更新されます。
オフトピック：なぜこのような複雑なコンテキストでコンセプトをまとめる必要があるのですか？コンテキストオブジェクトのため、さまざまなグラフィックデバイスを同じように見せることができます。描画に集中し、オペレーティングシステムとブラウザに他のタスクについて心配させるだけです。率直に言って、あらゆる種類のコンクリートを統一された抽象化に変え、それによって私たちの負担を軽減します。
コンテキストを取得することは非常に単純です。次のようにコードの2行だけが必要です。
var canvas = document.getElementById（ 'Tutorial'）;
var ctx = canvas.getContext（ '2d'）;
まず、Canvasオブジェクトを取得し、CanvasオブジェクトのgetContextメソッドを呼び出します。この方法は、現在パラメーター2Dでのみ渡すことができます。近い将来、パラメーター3dをサポートする場合があります。あなたはそれが何を意味するのか理解しなければなりません、それを楽しみにしています。
getContextメソッドは、CanvasRenderingContext2Dオブジェクト、つまりレンダリングコンテキストオブジェクトを返します。ここで詳細を確認できます。これらはすべて、いくつかの描画方法です。
3。ブラウザのサポート
サポートされていないブラウザに代替コンテンツを表示することに加えて、ブラウザがスクリプトを介してキャンバスをサポートするかどうかを確認することもできます。この方法は非常に簡単です。 getContext関数が存在するかどうかを判断してください。コードは次のとおりです。
var canvas = document.getElementById（ 'Tutorial'）;
if（canvas.getContext）{
alert（ "support <canvas> tag"）;
} それ以外 {
alert（ "サポートされていない<canvas>タグ"）;
}
4.小さな例
以下では、HTML5の描画機能を使用して、上下に移動するラインの例を実証します。特定のコードは、後続のコンテンツで提供されます。
ブラウザは<canvas>タグをサポートしていません。ChromeまたはFirefoxブラウザを使用してください