HTML5 Canvas快速入门学习教程_H5之家 - 中国HTML5教程资源分享第一站

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页面

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>基础的HTML5页面</title> </head> <body> Hello Airing! </body> </html>

演示运行结果如下：

HTML是由一个个形如尖括号<>的标签元素组成，这些标签通常是成对出现，并且标签之间只能嵌套不能交叉。
扩展：
成对出现的叫做闭合标签，单个出现的叫做单标签。不管怎样都是闭合的(单标签可以不闭合，但是在XHTML中严格要求了闭合)。闭合标签又分为开始标签和结束标签，如<body>是开始标签，</body>是结束标签。自标签如<input/> <br/>等。
关于更多的标签，建议大家自行了解一下。推荐W3school平台自学。
这里我们着重讲一下上述代码中出现的标签。

<!doctype html>

这个标签说明 Web 浏览器将在标准模式下呈现页面。根据 W3C 定义的 HTML5 规范，这是 HTML5 文档所必需的。这个标签简化了长期以来在不同的浏览器呈现 HTML 页面时出现的奇怪差异。它通常为文档中的第一行。

这是包含语言说明的<html>标签，例如，"en"为英语，"zh"为中文。

这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是<title>标记符和<meta>标记符。

以下表格列出了HTML head 元素下的所有标签和功能：

标签描述

<head> 定义了文档的信息

<title> 定义了文档的标题

<base> 定义了页面链接标签的默认链接地址

这个标签说明 Web 浏览器使用的字符编码模式，这里通常设置为UTF-8。如果没有需要特别设置的没必要改变它。这也是 HTML5 页面需要的元素。

这个标签说明在浏览器窗口展示的 HTML 的标题。这是一个很重要的标记，它是搜索引擎用来在 HTML 页面上收录内容的主要信息之一。

网页中显示的实际内容均包含在这2个<body>之间。
综上，HTML5网页是由第一行的<!doctype html>与<html>部分组成，而<html>主要分为两部分——由<head>标签规定的头部部分，和由<body>规定的主体部分。
这样，我们就把最简单的HTML网页的基本结构给捋出来了。

添加一个Canvas
在HTML中添加Canvas非常简单，只需要在HTML的<body>部分，添加上<canvas>标签就可以了！可以参考下面的代码。

<!doctype html><html lang="zh"><head><meta charset="UTF-8"><title>基础的HTML5页面</title> </head> <body> <canvas> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </canvas></body> </html>

由于结果页面是一个完完全全的空白页面，所以这里我就不贴图了。大家可能会很好奇，为什么会是一个空白呢？（废话，我还没来得及画画呢！）Canvas的本意是画布，也就是画布的意思（废话...），画布在HTML5中是透明的，是不可见的。
那<canvas>标签中的那段文本是什么意思呢？那是一旦浏览器执行HTML页面时不支持Canvas，就会显示这段文字，换言之，只要你的浏览器支持Canvas，页面上就不会显示这个文本。
那<canvas>中的id是什么意思？id是标签的属性之一，在JavaScript代码中用来指定特定的<canvas>的名字，就像一个人的身份证号码一样，是唯一的。
为了更清楚的展示Canvas，以及方便之后的演示，我稍微修改了一下代码，之后的绘图都会在这个Canvas上绘制。

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>基础的Canvas</title> </head> <body> <div> <canvas> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ </canvas> </div> </body> </html>

运行结果：

对以上代码有几点说明：