第一章 基础知识
第一节 canvas元素
1939年，米高梅公司（Metro-Goldwyn-Mayer Studios）曾经发行了一部电影，根据美国国会图书馆（American Library of Congress）的说法，它注定会成为历史上观看人数最多的电影。《绿野仙踪》这部电影讲述了一个名叫Dorothy的年轻女孩与宠物狗Toto的故事。他们被一阵猛烈的龙卷风从美国中部的堪萨斯州刮到了名为“奥兹王国”（Oz）的一片梦幻国度之中。
这部电影一开始，是乏味与沉闷的黑白场景，等到Dorothy与Toto到了奥兹王国，电影一下子就切入了色彩鲜明的画面之中，整个冒险也就随之开始了……
在过去二十多年的时间里，软件开发者一直都在编写乏味、沉闷的网络应用程序，这些程序不外乎将一张张老套的表格永无止境般地展示给用户，令人烦躁不堪。终于，我们来到了HTML5的国度，它让开发者可以制作出激动人心的应用程序来。这些程序运行在浏览器之中，但是看上去与传统的桌面应用程序很相似。
在这个HTML5的奥兹王国中，我们将使用具有魔力的canvas元素，来在浏览器中做一番奇妙的事情。我们将会实现一个如图1-1所示的图像查看器，一个交互式的放大镜，一个可以在各种得体的浏览器以及iPad之中运行的绘图程序。我们还要做很多动画，包含一个优秀的弹珠台游戏在内的许多游戏，一些图像效果滤镜，以及很多其他的网络应用程序。在以前，上述软件完全处于Flash开发的领域之中。
咱们开始吧！
图1-1 Canvas提供了功能强大的图形处理API
1.1 canvas元素
canvas元素可以说是HTML5元素中功能最强大的一个。然而，你马上就会看到，它真正的能力是通过Canvas的context 对象而表现出来的。该环境变量可以从canvas元素身上获取。图1-2是一个简单的例子，它使用了canvas元素及与之相关的绘图环境。
图1-2 Hello Canvas范例程序
图1-2中的应用程序非常简单，它将一个字符串显示出来，该字符串大致与canvas自身的中心点对齐。该应用程序的HTML代码如程序清单1-1所示。
程序清单1-1中使用了canvas元素，为其指定了一个标识符，并设置了该元素的宽度与高度。请注意canvas元素内容部分（body）所含的文本，这种文本叫做“后备内容”（fallback content），浏览器仅在不支持canvas元素的时候，才会显示该内容。
程序清单1-1 example.html
<!DOCTYPE html>
<html>
<head>
<title>A Simple Canvas Example</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin: 10px;
padding: 10px;
background: #ffffff;
border: thin inset #aaaaaa;
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='300'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
除了这个元素之外，程序清单1-1中的HTML代码，还使用了CSS来设置应用程序的背景色以及canvas元素自身的某些属性。在默认状况下，canvas元素的背景色与其父元素的背景色一致。所以，我们用CSS来将canvas元素的背景色设置成不透明的白色，这样就可以将它同淡灰色背景的应用程序区分开来。
HTML5 Canvas核心技术—图形、动画与游戏开发
- 作者：
- David.Geary
- 类别：
- 基础信息化
- 出版社：
- 华章出版社
- 出版时间：
- 2013年5月
- 定价：
- ￥99.00
- 京东价：￥79.70
实际售价以e-works战略合作伙伴当日售价为准