《HTML5 Canvas开发详解》——第1章 HTML5 Canvas简介1.1　基础的HTML页面-CSDN博客

本节书摘来自异步社区《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页面需要的元素。