本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第1章，第1.1节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第1章 HTML5 Canvas简介
HTML5是新一代的HTML，即超文本标记语言。HTML从1993年第一次标准化后，便奠定了万维网的基础。HTML通过使用将标签用尖括号（< >）括起来的方式定义Web页面内容。
HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域。即时模式是指在画布上呈现像素的方式，HTML Canvas通过JavaScript调用Canvas API，在每一帧完全重绘屏幕上的位图。作为一个程序员，所要做的就是在每一帧渲染之前设置屏幕显示，以便正确地显示像素。
这使得HTML5 Canvas与在保留模式下运行的Flash、Silverlight或SVG有很大的区别。在保留模式下，对象显示列表通过图形渲染器保存，通过在代码中设置属性（例如，x坐标、y坐标和对象的alpha透明度）控制展示在屏幕上的对象。这使得程序员可以远离底层操作，但是它弱化了对位图屏幕最终渲染效果的控制。
基本的HTML5 Canvas API包括一个2D上下文，允许程序员绘制各种图形、渲染文本并且将图像直接显示在浏览器窗口定义的区域。读者可以对画布上放置的的图形、文本和图像应用颜色、旋转、alpha透明度、像素处理，并且可以使用各种直线、曲线、边框、底纹来增强其效果。
就其本身而言，HTML5 Canvas 2D上下文是一个用来在位图区域渲染图形显示的API，但很少使用该技术在这个上下文中创建应用程序。通过跨浏览器兼容的JavaScript语言可以调用键盘鼠标输入、定时器间隔、事件、对象、类、声音、数学函数等功能，读者能够学会如何使用HTML5 Canvas创建优质的动画、应用程序和游戏。
正因如此，这本书应运而生。本书将深入解读Canvas API并将其融会贯通，在此过程中展示如何使用它来创建应用程序。本书中的很多技术已经被成功地应用于其他平台，现在将把它们应用到HTML5 Canvas这个令人兴奋的新技术上来。
1.1 基础的HTML页面
在开始讲解Canvas前，这一节需要谈论HTML5的相关标准，这里将使用它来创建Web页面。
HTML是用于在互联网上构建页面的标准语言。本书不会花很多时间在HTML上，但它是< canvas >的基础，所以不能完全跳过它。
一个基本的HTML页面分成几个部分，通常有< head > 和 ，新的HTML5规范增加了一些新的部分，例如< nav >、< article >、< header >和< footer >。
< head >标签通常包含与使用< body >标签来创建HTML页面相关的信息。将JavaScript函数放在< head >中是约定俗成的，稍后讨论< canvas >标签时也会这样做。虽然也有理由把JavaScript函数放在< body >中，但是简单起见最好把JavaScript函数放在< head >中。
基本的HTML页面如例1-1所示。
例1-1 简单的HTML页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX1: Basic Hello World HTML Page</title>
</head>
<body>
Hello World!
</body>
</html>
1.1.1 < !doctype html >
这个标签告诉Web浏览器在标准模式下呈现页面。根据W3C定义的HTML5规范，这是HTML5文档所必需的。这个标签简化了长期以来不同的浏览器呈现HTML页面时出现的奇怪差异。它通常为文档中的第一行。
1.1.2 < html lang="en" >
这是包含语言说明的< html >标签：例如，" en "为英语。下面是一些常见的语言值。
中文—lang= " zh "
法语—lang= " fr "
德语—lang=" de "
意大利语—lang=" it "
日语—lang= " ja "
韩语—lang= " ko "
波兰语—lang= " pl "
俄语—lang= "ru "
西班牙语—lang = " es "
1.1.3 < meta charset="UTF-8" >
这个标签告诉Web浏览器使用的字符编码模式。如果没有需要特别设置的选项，一般没必要改变它。这也是HTML5页面需要的元素。
1.1.4 < title >…< /title >
这个标签说明在浏览器窗口展示的HTML的标题。这是一个很重要的标记，它是搜索引擎用来在HTML页面上收录内容的主要信息之一。
1.1.5 实现简单的HTML页面
现在，在浏览器中看看这个页面（这是一个伟大的时刻，可以准备好工具开始开发代码了）。打开所选择的文本编辑器以及Web浏览器Safari、FireFox、Opera、Chrome或IE。
（1）在文本编辑器中，输入例1-1中的代码。
（2）选择路径保存为CH1EX1.html。
（3）在Chrome、Safari或Firefox的File菜单中，可以找到Open File命令。单击它，将看到一个能够打开文件的对话框（在Windows下用Chrome时，也可以按下Ctrl+O来打开文件）。
（4）找到刚刚创建的CH1EX1.html。
（5）单击打开按钮。
可以看到如图1-1所示的结果。
警告：
这是本书中仅有的两个能与IE8或更早版本浏览器兼容的示例之一。