HTML5 Canvas の入門学習tutorial_html5 チュートリアルのスキル-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

canvas 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 ページ

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

>
<html lang="zh" >
<頭>
<メタ charset="UTF- 8">
<タイトル>基本 HTML5 ページタイトル>
頭>
<body> こんにちは、放送中です! ボディ>
html>

デモの実行結果は次のとおりです:
2016317110813836.jpg (850×500)

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

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

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

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

<html lang="en" >

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

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

<頭>... head>

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

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

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<style>`	定义了HTML文档的样式文件

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

<メタ charset="UTF-8">

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

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

<タイトル>...タイトル>

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

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

<ボディ>...ボディ>

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

キャンバスの追加
HTML へのキャンバスの追加は非常に簡単で、HTML の部分に

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

><html lang ="zh">頭> <メタ charset="UTF-8"> ;<タイトル>基本 HTML5 ページタイトル > 頭>
<ボディ>
<キャンバス id="キャンバス" >
あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！！
キャンバス>ボディ>
html>

結果ページは真っ白なページなので、ここには写真を掲載しません。なぜ空白なのか気になるかもしれません。（ナンセンス、まだ絵を描く時間がない！） Canvas の本来の意味はキャンバス、キャンバスを意味します（ナンセンス...） HTML5 ではキャンバスは透明で見えません。

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

>
<html lang="zh" >
<頭>
<メタ charset="UTF- 8">
<タイトル>ベースのキャンバスタイトル>
頭>
<ボディ>
<div id="canvas-ワープ">
<キャンバス id="キャンバス" スタイル="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" 幅="800" 高さ=" 600">
你的浏览器居然不支持Canvas?!赶快换一个吧!!
キャンバス>
div>
ボディ>
html>