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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

不言

Jul 02, 2018 am 11:21 AM

canvas html5

この記事では、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 要素を見つけます。次に、