HTML5
究竟什么是HTML5？在W3C HTML5的常见问题中，关于HTML5是这样说明的：HTML5是一个开放的平台下开发的免费许可条款。
具体来说，对这句话有以下两种理解：
“
指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的，且随时间变化的。
指HTML5规范，当然也是开放式网络平台的一部分。
”
Canvas的浏览器支持
以下我列出了最流行的Web浏览器以及它们开始支持Canvas元素的最小版本号。
| Safari |
Firefox |
IE |
Chrome |
Opear |
iOS Safari |
Android Brower |
| 3.2 |
3.5 |
9 |
9 |
10.6 |
3.2 |
2.1 |
这里我推荐使用Chrome。
简单的HTML5页面
XML/HTML Code
复制内容到剪贴板
- >
-
- <html lang="zh">
-
- <head>
- <meta charset="UTF-8">
- <title>基础的HTML5页面title>
- head>
-
- <body> Hello Airing! body>
-
- html>
演示运行结果如下：
HTML是由一个个形如尖括号<>的标签元素组成，这些标签通常是成对出现，并且标签之间只能嵌套不能交叉。
扩展：
成对出现的叫做闭合标签，单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合，但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签，如
是开始标签，是结束标签。自标签如
等。
关于更多的标签，建议大家自行了解一下。推荐W3school平台自学。
这里我们着重讲一下上述代码中出现的标签。
这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范，这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。
这是包含语言说明的标签，例如，"en"为英语，"zh"为中文。
这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是
标记符和<meta>标记符。<br></p>
<p>以下表格列出了HTML head 元素下的所有标签和功能：<br> </p>
<table>
<thead>
<tr>
<th style="TEXT-ALIGN: center">标签</th>
<th style="TEXT-ALIGN: center">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="TEXT-ALIGN: center"><code><head></code></td>
<td style="TEXT-ALIGN: center">定义了文档的信息</td>
</tr>
<tr>
<td style="TEXT-ALIGN: center"><code><title></code></td>
<td style="TEXT-ALIGN: center">定义了文档的标题</td>
</tr>
<tr>
<td style="TEXT-ALIGN: center"><code><base></code></td>
<td style="TEXT-ALIGN: center">定义了页面链接标签的默认链接地址</td>
</tr>
<tr>
<td style="TEXT-ALIGN: center"><code><link></code></td>
<td style="TEXT-ALIGN: center">定义了一个文档和外部资源之间的关系</td>
</tr>
<tr>
<td style="TEXT-ALIGN: center"><code><meta></code></td>
<td style="TEXT-ALIGN: center">定义了HTML文档中的元数据</td>
</tr>
<tr>
<td style="TEXT-ALIGN: center"><code><script></code></td>
<td style="TEXT-ALIGN: center">定义了客户端的脚本文件</td>
</tr>
<tr>
<td style="TEXT-ALIGN: center"><code><style></code></td>
<td style="TEXT-ALIGN: center">定义了HTML文档的样式文件</td>
</tr>
</tbody>
</table>
<br>
<p></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">XML/HTML Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_2641">
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">charset</span><span>=</span><span class="attribute-value">"UTF-8"</span><span class="tag">></span><span> </span></span> </li>
</ol>
</div>
</div>
<p>这个标签说明 Web 浏览器使用的字符编码模式，这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。<br></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">XML/HTML Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_8182">
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>...</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span></span> </li>
</ol>
</div>
</div>
<p>这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记，它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。<br></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">XML/HTML Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_7985">
<ol class="dp-xml">
<li class="alt"><span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span>...</span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span> </li>
</ol>
</div>
</div>
<p>网页中显示的实际内容均包含在这2个<body>之间。<br>综上，HTML5网页是由第一行的<!doctype html>与<html>部分组成，而<html>主要分为两部分——由<head>标签规定的头部部分，和由<body>规定的主体部分。<br>这样，我们就把最简单的HTML网页的基本结构给捋出来了。</p>
<p><strong>添加一个Canvas<br></strong>在HTML中添加Canvas非常简单，只需要在HTML的<body>部分，添加上<canvas>标签就可以了！可以参考下面的代码。<br></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">XML/HTML Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_1913">
<ol class="dp-xml">
<li class="alt"><span><span><!doctype html</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">html</span><span> </span><span class="attribute">lang</span><span>=</span><span class="attribute-value">"zh"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">head</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">charset</span><span>=</span><span class="attribute-value">"UTF-8"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>基础的HTML5页面</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span><span class="tag"></</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span> </li>
<li><span></span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span> </span> </li>
<li class="alt"><span> </span><span class="tag"><</span><span class="tag-name">canvas</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"canvas"</span><span class="tag">></span><span> </span> </li>
<li><span> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </span> </li>
<li class="alt"><span> </span><span class="tag"></</span><span class="tag-name">canvas</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span> </li>
<li><span></span><span class="tag"></</span><span class="tag-name">html</span><span class="tag">></span><span> </span> </li>
</ol>
</div>
</div>
<p>由于结果页面是一个完完全全的空白页面，所以这里我就不贴图了。大家可能会很好奇，为什么会是一个空白呢？（废话，我还没来得及画画呢！）Canvas的本意是画布，也就是画布的意思（废话...），画布在HTML5中是透明的，是不可见的。<br>那<canvas>标签中的那段文本是什么意思呢？那是一旦浏览器执行HTML页面时不支持Canvas，就会显示这段文字，换言之，只要你的浏览器支持Canvas，页面上就不会显示这个文本。<br>那<canvas>中的id是什么意思？id是标签的属性之一，在JavaScript代码中用来指定特定的<canvas>的名字，就像一个人的身份证号码一样，是唯一的。<br>为了更清楚的展示Canvas，以及方便之后的演示，我稍微修改了一下代码，之后的绘图都会在这个Canvas上绘制。<br></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">XML/HTML Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_4703">
<ol class="dp-xml">
<li class="alt"><span><span><!doctype html</span><span class="tag">></span><span> </span></span> </li>
<li><span></span><span class="tag"><</span><span class="tag-name">html</span><span> </span><span class="attribute">lang</span><span>=</span><span class="attribute-value">"zh"</span><span class="tag">></span><span> </span> </li>
<li class="alt"><span></span><span class="tag"><</span><span class="tag-name">head</span><span class="tag">></span><span> </span> </li>
<li><span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">charset</span><span>=</span><span class="attribute-value">"UTF-8"</span><span class="tag">></span><span> </span> </li>
<li class="alt"><span></span><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>基础的Canvas</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span> </li>
<li><span></span><span class="tag"></</span><span class="tag-name">head</span><span class="tag">></span><span> </span> </li>
<li class="alt"><span> </span> </li>
<li><span></span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span> </span> </li>
<li class="alt"><span></span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"canvas-warp"</span><span class="tag">></span><span> </span> </li>
<li><span> </span><span class="tag"><</span><span class="tag-name">canvas</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"canvas"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"border: 1px solid #aaaaaa; display: block; margin: 50px auto;"</span><span> </span><span class="attribute">width</span><span>=</span><span class="attribute-value">"800"</span><span> </span><span class="attribute">height</span><span>=</span><span class="attribute-value">"600"</span><span class="tag">></span><span> </span> </li>
<li class="alt"><span> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </span> </li>
<li><span> </span><span class="tag"></</span><span class="tag-name">canvas</span><span class="tag">></span><span> </span> </li>
<li class="alt"><span></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span> </li>
<li><span></span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span> </li>
<li class="alt"><span></span><span class="tag"></</span><span class="tag-name">html</span><span class="tag">></span><span> </span> </li>
</ol>
</div>
</div>
<p>运行结果：<br><a href="http://img.e-com-net.com/image/info11/4813487ec2b040e69f8a3c9535d34dfc.jpg" target="_blank"><img alt="HTML5 Canvas入门学习教程_第2张图片" src="http://img.e-com-net.com/image/info11/4813487ec2b040e69f8a3c9535d34dfc.jpg" width="650" height="382" style="border:1px solid black;"></a></p>
<p>对以上代码有几点说明：</p>
<p>1.添加了<div>标签，将<canvas>包裹其中，个人习惯，暂时并没有什么卵用。<br>2.给<canvas>标签指定了width和height属性，规定了它的宽和高。<br>3.给<canvas>标签添加了一个内联样式，使其变为块级元素并居中显示。</p>
<p>关于CSS的内容这里不做说明，毕竟这不是本课程的主角，若做扩展会花费大量篇幅。</p>
<p><strong>引用Canvas元素</strong></p>
<p><strong><br>文档对象模型(DOM)<br></strong>文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。<br>文档对象模型代表了在 HTML 页面上的所有对象。它是语言中立且平台中立的。它允许页面的内容和样式被 Web 浏览器渲染之后再次更新。用户可以通过 JavaScript 访问 DOM。<br>在开始使用<canvas>前,首先需要了解两个特定的 DOM 对象：window 和 document。</p>
<p>window 对象是 DOM 的最高一级，需要对这个对象进行检测来确保开始使用 Canvas 应用程序之前，已经加载了所有的资源和代码。<br>document 对象包含所有在 HTML 页面上的 HTML 标签。需要对这个对象进行检索来找 出用 JavaScript 操纵<canvas>的实例。</p>
<p><strong>JavaScript放置位置<br></strong>使用 JavaScript 为 Canvas 编程会产生一个问题：在创建的页面中，从哪里启动 JavaScript程序?<br>把 JavaScript 放进 HTML 页面的<head>标签中是个不错的主意，这样做的好处是很容易找到它，也是上一章我们介绍<head>中所提到的。但是，把 JavaScript 程序放在这里就意味着整个 HTML 页面要加载完 JavaScrpit 才能配合 HTML 运行，这段 JavaScript 代码也会在整个页面加载前就开始执行了。结果就是，运行 JavaScript 程序之前必须检查 HTML 页面是否已经加载完毕。<br>最近有一个趋势是将 JavaScript 放在 HTML 文档结尾处的</body>标签之前，这样就可以确保在 JavaScript 运行时整个页面已经加载完毕。然而，由于在运行<canvas>程序前需要使用 JavaScript 测试页面是否加载，因此最好还是将 JavaScript 放在<head>中。<br>不过本人不走寻常路(笑)，所以之后的案例，还是按照自己的编码风格将JavaScript代码放在了<body>的尾部。当然，如果JavaScript代码有些多，就推荐使用加载外部 .js 文件的方式。代码大致如下：<br></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">JavaScript Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_3428">
<ol class="dp-c">
<li class="alt"><span><span><script type=</span><span class="string">"text/javascript"</span><span> src=</span><span class="string">"bootstarp.js"</span><span>></script> </span></span> </li>
</ol>
</div>
</div>
<p>在实际项目开发中，都是将HTML、CSS、JS三者完全分离的。不过用于案例演示代码略少，所以大多没有使用加载外部 .js 文件的方式。</p>
<p><br><strong>获取canvas对象<br></strong>获取canvas对象其实就是一句话的事情。<br></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">JavaScript Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_6409">
<ol class="dp-c">
<li class="alt"><span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span></span> </li>
</ol>
</div>
</div>
<p>var用于变量定义，由于JS是弱类型语言，所以定义啥变量都用var。跟在var之后的canvas是变量。使用document对象的getElementById()的方法，通过id获取对象。之前我们为<canvas>标签赋予了一个id，名叫canvas，所以该句话最后一个canvas是指<canvas>的id——canvas。（是不是有点绕，需要自己多读几遍捋清楚。）<br>获得画笔(2D环境)<br>画画首先需要啥？画笔啊。获取canvas画笔也是一句话的事情，就是直接使用刚才获得的canvas对象，调用它的getContext("2d")方法，即可。<br></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">JavaScript Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_2118">
<ol class="dp-c">
<li class="alt"><span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span></span> </li>
</ol>
</div>
</div>
<p>这里的context便是画笔了。<br>在其他教程中都是使用2D环境这个专有术语，我觉得画笔更加形象。灵感引自Java中Graphics类的g画笔，原理与之相同。</p>
<p><br><strong>总结<br></strong>准备工作只有三步：</p>
<p>1.布置画布：通过添加<canvas>标签，添加canvas元素<br>2.获取画布：通过<canvas>标签的id，获得canvas对象<br>3.获得画笔：通过canvas对象的getContext("2d")方法，获得2D环境</p>
<p>对应的代码也就是三句话：</p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">JavaScript Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_5234">
<ol class="dp-c">
<li class="alt"><span><span><canvas id=“canvas”></canvas> </span></span> </li>
<li><span></span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li>
<li class="alt"><span></span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li>
</ol>
</div>
</div>
<p>完整代码如下。<br></p>
<div class="codeText">
<div class="codeHead">
<span class="lantxt">JavaScript Code</span>
<span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span>
</div>
<div id="code_3843">
<ol class="dp-c">
<li class="alt"><span><span><!doctype html> </span></span> </li>
<li><span><html lang=</span><span class="string">"zh"</span><span>> </span> </li>
<li class="alt"><span><head> </span> </li>
<li><span> <meta charset=</span><span class="string">"UTF-8"</span><span>> </span> </li>
<li class="alt"><span> <title>基础的Canvas
"canvas-warp">
"canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
