HTML5 の Canvas を使用してスマイリーフェイスを描画するコード-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 の Canvas を使用してスマイリーフェイスを描画するコード

不言

Jul 02, 2018 am 11:21 AM

canvashtml5

この記事では、HTML5 で Canvas を使用して笑顔を描くチュートリアルを主に紹介します。Canvas を使用した描画は、HTML5 の基本的な機能です。必要な方は参考にしてください。

201557180008373.jpg (600×436) 今日は、Canvas ( Canvas) Web テクノロジーとそのドキュメントオブジェクトモデル (DOM と呼ばれることが多い) との関連。このテクノロジーは、Web 開発者が JavaScript を使用して HTML 要素にアクセスし、変更できるようにするため、非常に強力です。

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

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

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

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

<!DOCTYPE html><body>
   <canvas id=&#39;canvas&#39; width=&#39;640&#39; height=&#39;480&#39;></canvas>
   <script type=&#39;text/javascript&#39; src=&#39;script.js&#39;></script>
</body></html>

タグのセットを使用します。、つまり、本文を通じてドキュメントにさらに要素を追加できます。これを機に、id属性のcanvasを持つ640*480のcanvas要素を完成させました。

この属性は、一意の識別のために要素に文字列を追加するだけです。後でこの属性を使用して、JavaScript ファイル内で Canvas 要素を見つけます。次に、<script> タグを使用して JavaScript ファイルを参照します。これにより、JavaScript 言語の種類と script.js ファイルへのパスが指定されます。 DOMの操作 「ドキュメントオブジェクトモデル」という名前の通り、別の言語を使用してインターフェースを呼び出してHTMLドキュメントにアクセスする必要があります。ここで使用する言語はJavaScriptです。これを行うには、組み込みドキュメントオブジェクトに単純な参照を配置する必要があります。このオブジェクトは < html > タグに直接対応しており、同様に要素にアクセスして変更を実行できるため、プロジェクト全体の基礎となります。 <pre class='brush:php;toolbar:false;'>var canvas = document.getElementById(&#39;canvas&#39;);</pre> id="canvas" を使用して Canvas 要素を定義した方法を覚えていますか?次に、document.getElementById メソッドを使用して HTML ドキュメントからこの要素を取得します。必要な要素 ID に一致する文字列を渡すだけです。この要素を取得したので、それを使用してペイントを開始できます。 キャンバスで描画するには、そのコンテキストを操作する必要があります。驚くべきことに、キャンバスには描画のためのメソッドやプロパティが含まれていませんが、そのコンテキストオブジェクトには必要なメソッドがすべて含まれています。コンテキスト定義は次のようになります: <pre class='brush:php;toolbar:false;'>var context = canvas.getContext(&#39;2d&#39;);</pre> 各キャンバスには、プログラムの目的に応じて、いくつかの異なるコンテキストがあります。2 次元コンテキストだけで十分で、スマイリーを作成するために必要なすべての描画メソッドが取得されます。顔。 始める前に、コンテキストには 2 つのカラープロパティ (ストローク用と塗りつぶし用) が格納されていることをお知らせしなければなりません。スマイリーフェイスの場合、塗りつぶしを黄色に、ブラシを黒に設定する必要があります。 <pre class='brush:php;toolbar:false;'>context.fillStyle = &#39;yellow&#39;; context.strokeStyle = &#39;black&#39;;</pre>コンテキストに必要な色を設定した後、顔の円を描く必要があります。残念ながら、コンテキスト内で円を作成するための事前定義されたメソッドは存在しないため、いわゆるパスを使用する必要があります。パスは単純に接続された一連の直線と曲線であり、描画が完了するとパスは閉じられます。 <pre class='brush:php;toolbar:false;'>context.beginPath(); context.arc(320, 240, 200, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();</pre> はこのように説明しています。コンテキストを使用して新しいパスを開始します。次に、点 (320, 240) に半径 200 ピクセルの円弧を作成します。最後の 2 つのパラメーターは、円弧を構築するための初期角度と最終角度を指定するため、0 と 2 *Math.PI を渡して完全な円を作成します。最後に、コンテキストを使用して、設定した色に基づいてパスを塗りつぶし、描画します。 スクリプトの機能にはパスを閉じる必要はありませんが、スマイリーフェイスの新しい目と口の描画を開始できるようにパスを閉じる必要があります。目も同じ方法で作成できますが、それぞれの目に必要な半径は小さくなり、位置が異なります。ただし、最初に塗りつぶしの色を白に設定することを忘れないでください。 <pre class='brush:php;toolbar:false;'>context.fillStyle = &#39;white&#39;; 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();</pre>上記は目のコードのすべてです。口は非常に似ていますが、今回は円弧を塗りつぶさず、角度は半円として構成されます。これを行うには、開始角度をゼロに設定し、終了角度を -1 * Math.PI に設定する必要があります。ブラシの色を赤に設定することを忘れないでください。 りーおめでとうございます 以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 関連する推奨事項: <a title="js HTML5 canvas绘制图片的方法" href="http://www.php.cn/div-tutorial-400954.html" target="_blank">js HTML5 Canvas で画像を描画する方法 <a title="HTML5和CSS3实现3D展示商品信息的代码" href="http://www.php.cn/html5-tutorial-405269.html" target="_blank"> 製品情報の 3D 表示を実装する HTML5 および CSS3 コード <a title="HTML5 Canvas实现绘制一个像素宽的细线" href="http://www.php.cn/html5-tutorial-404569.html" target="_blank">HTML5 Canvas はピクセル幅の細い線の描画を実装します </script>

以上がHTML5 の Canvas を使用してスマイリーフェイスを描画するコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5：Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

See all articles