HTML5 Canvas の入門学習tutorial_html5 チュートリアルのスキル

HTML5

HTML5 とは正確には何ですか? W3C HTML5 FAQ では、HTML5 について次のように述べられています。HTML5 はオープン プラットフォームで開発された無料のライセンスです。
具体的には、この文には次の 2 つの解釈があります。
「
は、将来のオープン ネットワーク プラットフォームを構成するテクノロジーのグループを指します。これらのテクノロジーには、HTML5 仕様、CSS3、SVG、MATHML、Geolocation、XmlHttpRequest が含まれます。」 、Context 2D、Web フォント、およびその他のテクノロジー。この一連のテクノロジーの境界は非公式であり、時間の経過とともに変化します。
HTML5 仕様を参照し、Open Web Platform の一部であることは明らかです。

Canvas のブラウザ サポート
以下に、最も一般的な Web ブラウザと、それらが Canvas 要素のサポートを開始した最小バージョン番号をリストします。

ここでは Chrome の使用をお勧めします。

シンプルな HTML5 ページ

デモの実行結果は次のとおりです:

HTML は山かっこ <> のような形のタグ要素で構成されます。これらのタグは通常ペアで表示され、タグはネストすることのみが可能で、交差することはできません。
拡張:
ペアで現れるものを閉じたタグ、単独で現れるものを単一タグと呼びます。それは何があっても閉じられます (単一のタグを閉じる必要はありませんが、XHTML では閉じることが厳密に必要です)。終了タグは開始タグと終了タグに分かれています。たとえば、 は開始タグ、 は終了タグです。 などの自己ラベル
その他のタグについては、自分で学習することをお勧めします。自習には W3school プラットフォームをお勧めします。
ここでは、上記のコードに含まれるタグに焦点を当てます。

このタグは、Web ブラウザが標準モードでページをレンダリングすることを示します。これは、W3C によって定義された HTML5 仕様に従って、HTML5 ドキュメントに必要です。このタグは、ブラウザごとに HTML ページをレンダリングする方法における長年の奇妙な違いを単純化します。通常、これは文書の最初の行です。

これは、言語の説明を含む タグです。たとえば、英語の場合は「en」、中国語の場合は「zh」です。

これら 2 つのマーカーは、それぞれヘッダー情報の始まりと終わりを示します。ヘッダーに含まれるタグは、ページのタイトル、序文、説明などの内容であり、コンテンツそのものとしては表示されませんが、Web ページの表示効果に影響します。ヘッダーで最もよく使用されるタグは、<title> タグと <meta> タグです。

次の表は、HTML の head 要素の下にあるすべてのタグと関数を示しています。

このタグは、Web ブラウザで使用される文字エンコード モードを記述します。通常、ここでは UTF-8 に設定されます。特別な設定が必要ない場合は変更する必要はありません。これは HTML5 ページの必須要素でもあります。

このタグはブラウザウィンドウに表示されるHTMLのタイトルを記述します。これは重要なタグであり、検索エンジンが HTML ページ上のコンテンツのインデックスを作成するために使用する主要な情報の 1 つです。

Web ページに表示される実際のコンテンツは、これら 2 つの の間に含まれます。
要約すると、HTML5 Web ページは 1 行目の 部分と 部分で構成されます。 ;head> タグ部分と、 で指定されるボディです。
このようにして、最も単純な HTML Web ページの基本構造を理解しました。

キャンバスの追加
HTML へのキャンバスの追加は非常に簡単で、HTML の 部分に タグを追加するだけです。以下のコードを参照してください。

結果ページは真っ白なページなので、ここには写真を掲載しません。なぜ空白なのか気になるかもしれません。 （ナンセンス、まだ絵を描く時間がない！） Canvas の本来の意味はキャンバス、キャンバスを意味します（ナンセンス...） HTML5 ではキャンバスは透明で見えません。
タグ内のテキストは何を意味しますか?つまり、HTML ページの実行時にブラウザが Canvas をサポートしていないと、このテキストは表示されます。つまり、ブラウザが Canvas をサポートしている限り、このテキストはページに表示されません。
の ID は何を意味しますか? id はタグの属性の 1 つで、特定の の名前を指定するために JavaScript コードで使用され、人の ID 番号と同様に一意です。
キャンバスをより明確に表示し、その後のデモンストレーションを容易にするために、コードを少し変更しました。これ以降のすべての描画はこのキャンバス上に描画されます。

実行結果:

上記のコードに関するいくつかの注意事項:

1.