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

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

WBOY

リリース： 2016-05-16 15:46:44

オリジナル

2422 人が閲覧しました

201557180008373.jpg (600×436) 今日は、Canvas と呼ばれる Web テクノロジーと、その Document Object Model (一般に 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 を参照することです。これは非常に簡単です: