この記事では、主にHTML5でキャンバスを使用して笑顔を描くというチュートリアルを紹介します。描画にキャンバスを使用することは、HTML5の基本機能です。それを必要とする友達はそれを参照できます
今日、Canvasと呼ばれるWebテクノロジーと、ドキュメントオブジェクトモデル(Domと呼ばれることが多い)との関連性を学びます。このテクノロジーは、Web開発者がJavaScriptを使用してHTML要素にアクセスおよび変更できるため、非常に強力です。
今、あなたはなぜJavaScript Dreastasticを使用する必要があるのか疑問に思っているかもしれません。要するに、HTMLとJavaScriptは相互依存しており、Canvas Elementsなどの一部のHTMLコンポーネントはJavaScriptから単独で使用することはできません。結局のところ、それを引き出すことができない場合、キャンバスは何ができますか?
この概念をよりよく理解するために、サンプルプロジェクトでシンプルなスマイリーフェイスを描くようにします。始めましょう。
始める
まず、プロジェクトファイルを保存する新しいディレクトリを作成し、お気に入りのテキストエディターまたはWeb開発ツールを開きます。これを行うと、空のindex.htmlと空のscript.jsを作成する必要があります。その後、編集を続けます。
次に、プロジェクトのコードのほとんどがJavaScriptで記述されるため、index.htmlファイルを変更しましょう。 HTMLで行う必要があるのは、キャンバス要素と参照Script.jsを作成することです。これは非常に簡単です。
XML/HTMLコードコピーコンテンツにクリップボードに