ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 の Canvas を使用してスマイリーフェイスを描画するコード
この記事では、HTML5 で Canvas を使用して笑顔を描くチュートリアルを主に紹介します。Canvas を使用した描画は、HTML5 の基本的な機能です。必要な方は参考にしてください。
今日は、Canvas ( Canvas) Web テクノロジーとそのドキュメント オブジェクト モデル (DOM と呼ばれることが多い) との関連。このテクノロジーは、Web 開発者が JavaScript を使用して HTML 要素にアクセスし、変更できるようにするため、非常に強力です。
ここで、なぜ JavaScript をこれほど大規模に使用する必要があるのか疑問に思われるかもしれません。つまり、HTML と JavaScript は相互依存しており、canvas 要素などの一部の HTML コンポーネントは JavaScript から独立して使用することはできません。結局のところ、絵が描けなければキャンバスに何の意味があるのでしょうか?
この概念をより深く理解するために、サンプル プロジェクトを通じて簡単なスマイリーフェイスを描いてみましょう。はじめましょう。
始めましょう
まず、プロジェクト ファイルを保存するための新しいディレクトリを作成し、お気に入りのテキスト エディターまたは Web 開発ツールを開きます。これを実行したら、空のindex.htmlと空のscript.jsを作成する必要があります。後で編集を続けます。
次に、index.html ファイルを変更しましょう。プロジェクトのコードのほとんどは JavaScript で記述されるため、これにはあまり関係ありません。 HTML で行う必要があるのは、canvas 要素を作成して script.js を参照することです。これは非常に簡単です:
<!DOCTYPE html><body> <canvas id='canvas' width='640' height='480'></canvas> <script type='text/javascript' src='script.js'></script> </body></html>タグのセットを使用します。 、つまり、本文を通じてドキュメントにさらに要素を追加できます。これを機に、id属性のcanvasを持つ640*480のcanvas要素を完成させました。
DOMの操作
var canvas = document.getElementById('canvas');id="canvas" を使用して Canvas 要素を定義した方法を覚えていますか?次に、document.getElementById メソッドを使用して HTML ドキュメントからこの要素を取得します。必要な要素 ID に一致する文字列を渡すだけです。この要素を取得したので、それを使用してペイントを開始できます。
var context = canvas.getContext('2d');各キャンバスには、プログラムの目的に応じて、いくつかの異なるコンテキストがあります。2 次元コンテキストだけで十分で、スマイリーを作成するために必要なすべての描画メソッドが取得されます。顔 。
context.fillStyle = 'yellow'; context.strokeStyle = 'black';コンテキストに必要な色を設定した後、顔の円を描く必要があります。残念ながら、コンテキスト内で円を作成するための事前定義されたメソッドは存在しないため、いわゆるパスを使用する必要があります。パスは単純に接続された一連の直線と曲線であり、描画が完了するとパスは閉じられます。
context.beginPath(); context.arc(320, 240, 200, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();はこのように説明しています。コンテキストを使用して新しいパスを開始します。次に、点 (320, 240) に半径 200 ピクセルの円弧を作成します。最後の 2 つのパラメーターは、円弧を構築するための初期角度と最終角度を指定するため、0 と 2 *Math.PI を渡して完全な円を作成します。最後に、コンテキストを使用して、設定した色に基づいてパスを塗りつぶし、描画します。
context.fillStyle = 'white'; context.beginPath(); context.arc(270, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath(); context.beginPath(); context.arc(370, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();上記は目のコードのすべてです。口は非常に似ていますが、今回は円弧を塗りつぶさず、角度は半円として構成されます。これを行うには、開始角度をゼロに設定し、終了角度を -1 * Math.PI に設定する必要があります。ブラシの色を赤に設定することを忘れないでください。
りー
おめでとうございます以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
製品情報の 3D 表示を実装する HTML5 および CSS3 コード
HTML5 Canvas はピクセル幅の細い線の描画を実装します
以上がHTML5 の Canvas を使用してスマイリーフェイスを描画するコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。