HTML5 で Canvas を使用して笑顔を描くチュートリアル_html5 チュートリアルのヒント

今日は、Canvas と呼ばれる Web テクノロジーと、その Document Object Model (一般に DOM) との関連について学びます。このテクノロジーは、Web 開発者が JavaScript を使用して HTML 要素にアクセスし、変更できるようにするため、非常に強力です。

ここで、なぜ JavaScript を大々的に使う必要があるのか​​疑問に思われるかもしれません。つまり、HTML と JavaScript は相互依存しており、canvas 要素などの一部の HTML コンポーネントは JavaScript から独立して使用することはできません。結局のところ、絵が描けなければキャンバスに何の意味があるのでしょうか？

この概念をより深く理解するために、サンプル プロジェクトを通じて簡単なスマイリーフェイスを描いてみましょう。始めましょう。
開始

まず、プロジェクト ファイルを保存するための新しいディレクトリを作成し、お気に入りのテキスト エディタまたは Web 開発ツールを開きます。これを実行したら、空のindex.htmlと空のscript.jsを作成する必要があります。後で編集を続けます。

次に、index.html ファイルを変更しましょう。プロジェクトのコードのほとんどは JavaScript で記述されるため、これにはあまり関係ありません。 HTML で行う必要があるのは、canvas 要素を作成し、script.js を参照することです。これは非常に簡単です:

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>ボディ>
3. キャンバス id='キャンバス' 幅='640' 高さ='480'>キャンバス>
4. スクリプト type='text/ javascript' src='script.js'> スクリプト>
6. body>html>

説明すると、本文を通じてドキュメントに要素を追加できるように、一連のタグ を使用します。これを機に、id属性のcanvasを持つ640*480のcanvas要素を完成させました。

この属性は、一意の識別のために要素に文字列を追加するだけです。後でこの属性を使用して、JavaScript ファイル内で Canvas 要素を見つけます。次に、<script> タグを使用して JavaScript ファイルを参照します。これにより、JavaScript 言語の種類と script.js ファイルへのパスが指定されます。 <br />DOM を操作する</script>

その名前は「Document Object Model」なので、別の言語を使用してインターフェイスを呼び出して HTML ドキュメントにアクセスする必要があります。ここで使用する言語は JavaScript です。これを行うには、組み込みドキュメント オブジェクトに単純な参照を配置する必要があります。このオブジェクトは タグに直接対応しており、同様に要素にアクセスして変更を実行できるため、プロジェクト全体の基礎となります。

XML/HTML コードコンテンツをクリップボードにコピー

1. var canvas = ドキュメント.getElementById('canvas'); >

キャンバス要素を定義するために id="canvas" を使用した方法を覚えていますか?次に、document.getElementById メソッドを使用して HTML ドキュメントからこの要素を取得します。必要な要素 ID に一致する文字列を渡すだけです。この要素を取得したので、それを使用してペイントを開始できます。

キャンバスで描画するには、そのコンテキストを操作する必要があります。驚くべきことに、キャンバスには描画のためのメソッドやプロパティが含まれていませんが、そのコンテキスト オブジェクトには必要なメソッドがすべて含まれています。コンテキスト定義は次のようになります:

XML/HTML コード

コンテンツをクリップボードにコピー

1. var context = canvas.getContext('2d'); >
各キャンバスには、プログラムの目的に応じて、いくつかの異なるコンテキストがあります。スマイリーフェイスを作成するために必要なすべての描画メソッドにアクセスできる 2D コンテキストは 1 つだけで十分です。

始める前に、コンテキストには 2 つのカラー プロパティ (ストローク用と塗りつぶし用) が保存されていることをお知らせしなければなりません。スマイリーフェイスの場合、塗りつぶしを黄色に、ブラシを黒に設定する必要があります。

XML/HTML コード

コンテンツをクリップボードにコピー

context.fillStyle

1. = ' yellow'; context.ストロークスタイル =
2. '黒'; コンテキストに必要な色を設定した後、顔の円を描く必要があります。残念ながら、コンテキスト内で円を作成するための事前定義されたメソッドは存在しないため、いわゆるパスを使用する必要があります。パスは単純に接続された一連の直線と曲線であり、描画が完了するとパスは閉じられます。

XML/HTML コード

コンテンツをクリップボードにコピー

context.beginPath();

context.arc(320, 240, 200, 0, 2 * Math.PI);

1. context.fill(); context.ストローク();
2. context.closePath();
5. このように説明すると、コンテキストを使用して新しいパスを開始します。次に、点 (320, 240) に半径 200 ピクセルの円弧を作成します。最後の 2 つのパラメーターは、円弧を構築するための初期角度と最終角度を指定するため、0 と 2 *Math.PI を渡して完全な円を作成します。最後に、コンテキストを使用して、設定した色に基づいてパスを塗りつぶし、描画します。 スクリプトが機能するためにパスを閉じる必要はありませんが、スマイリーフェイスの新しい目と口の描画を開始できるように、パスを閉じる必要があります。目も同じ方法で作成できますが、それぞれの目に必要な半径は小さくなり、位置が異なります。ただし、最初に塗りつぶしの色を白に設定することを忘れないでください。

XML/HTML コード

コンテンツをクリップボードにコピー

1. context.fillStyle = '白';
2. context.beginPath();
3. context.arc(270, 175, 30, 0, 2 * Math.PI);
4. context.fill();
5. context.ストローク();
6. context.closePath();
8. context.beginPath();
9. context.arc(370, 175, 30, 0, 2 * Math.PI); context.fill();
10. context.ストローク();
11. context.closePath();
14. 上記は目のコードのすべてです。口は非常に似ていますが、今回は円弧を塗りつぶさず、角度は半円として構成されます。これを行うには、開始角度をゼロに設定し、終了角度を -1 * Math.PI に設定する必要があります。ブラシの色を赤に設定することを忘れないでください。

XML/HTML コード

コンテンツをクリップボードにコピー

context.fillStyle

=

'red'
1. ; context.beginPath();
context.arc(320, 240, 150, 0, -1 * Math.PI);
2. context.fill()
3. context.ストローク();
4. context.closePath();
おめでとうございます
6. よくやった。このチュートリアルを完了し、素晴らしいスマイリーフェイスを作成し、Canvas、HTML、JavaScript、およびドキュメント オブジェクト モデルについてさらに学びました。ご質問がございましたら、メッセージを残してください。