HTML への Canvas タグの追加例 page_html5 チュートリアルのヒント

HTML ページの

で、次のコードを使用して タグを追加できます:

コードをコピー コードは次のとおりです:

お使いのブラウザではsupport HTML5 Canvas.

翻訳注: Canvas では、次の記述は許可されません:

コードをコピーしますコードは次のとおりです:

Let 上記のコードが何を行うかを見てみましょう。 タグには、次の 3 つの主要な属性があります。
1.id。 id 値を使用して、JavaScript コードで タグを参照できます。上記のコードでは、id 値は CanvasOne です。 2.幅。キャンバスの幅 (ピクセル単位)。上記のコードでは、幅の値は 500 ピクセルです。

3.身長。キャンバスの高さ (ピクセル単位)。上記のコードでは、高さの値は 300 ピクセルです。

Canvas の開始タグ と終了タグ の間には、任意のテキストを配置できます。HTML Web ページを開くブラウザが Canvas をサポートしていない場合、このテキストは Canvas に表示されます。ラベルが貼られている場所。上記のコードでは、「お使いのブラウザは HTML5 Canvas をサポートしていません。」というテキストを使用しています。

JavaScript でドキュメント オブジェクトを使用してキャンバス要素を参照する

HTML ページがロードされると、ドキュメント オブジェクトはページ内のすべての要素を参照するため、DOM を使用して上記のコードで定義された を参照できます。

Canvas インターフェイスを使用して描画を表示する場所を知るために、Canvas オブジェクトへの参照が必要です。

まず、Canvas オブジェクトへの参照を保持するために theCanvas という名前の変数を定義します。

次に、ドキュメント オブジェクトの getElementById() 関数を呼び出し、受信パラメータを CanvasOne (HTML ページの タグの ID) に設定して、Canvas オブジェクトを取得します。

コードをコピーしますコードは次のとおりです。

var theCanvas = document.getElementById("canvasOne");