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

今日は、Canvas と呼ばれる Web テクノロジーと、その Document Object Model (一般に DOM) との関連について学びます。このテクノロジーは、Web 開発者が JavaScript を使用して HTML 要素にアクセスし、変更できるようにするため、非常に強力です。

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

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

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

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

XML/HTML コードコンテンツをクリップボードにコピー

1. ><ボディ>
3. <キャンバス id='キャンバス' 幅='640' 高さ='480'>キャンバス>
4. <スクリプト type='text/ javascript' src='script.js'>スクリプト>
6. body>html>

説明すると、本文を通じてドキュメントに要素を追加できるように、一連のタグ < html > を使用します。これを機に、id属性のcanvasを持つ640*480のcanvas要素を完成させました。

この属性は、一意の識別のために要素に文字列を追加するだけです。後でこの属性を使用して、JavaScript ファイル内で Canvas 要素を見つけます。次に、

• AlloyTouch 全画面スクロール プラグインは 30 秒で滑らかな H5 ページを作成します
• HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）
• HTML5 Canvas 9での画像描画例を詳しく解説
• 正規表現と新しい HTML5 要素
• NodeJS と HTML5 を組み合わせて複数のファイルをドラッグ アンド ドロップしてサーバーにアップロードする方法