[canvas.docx

现在，我会花大量时间向学生，业余爱好者，专业开发者以及老师解释如何使用HTML5创造。而最近我也一直纠结着是否应该将这些观点与所有人分享。　为什么现在有这么多人对创造HTML5游戏感兴趣呢?因为今天的我们已经可以基于HTML5使用相同的代码而瞄准多种平台了：台式机(基于IE9/IE10，Firefox，Chrome。OperaSafari)，iOS和Android平板电脑与手机，Windows 8及其未来相关联的无数平板电脑与PC都欢迎HTML5游戏!我们也经常能够看到一些不费吹灰之力便移植到这些平台上的HTML5游戏项目。　除此之外，现代的JavaScripy引擎性能以及GPU硬件加速图像层都让我们能够更有信心地创造HTML5游戏。　Canvas和SVG：在屏幕上绘制的2种方法：　　canvas vs SVG(from webappers)　你必须在创造第一款HTML5游戏前先理解如何在屏幕上绘制好看的对象。这里主要存在2种方法，而为了找出它们的区别，你可以先阅读Patrick Dengler(SVG W3C Working Group的成员)的文章《Thoughts on when to use Canvas and SVG》。　我也在去年重新利用了Patrick的材料为微软的同事组织了一次45分钟的内部会话。　　overview(from webappers)　这是当时的幻灯片。　最后，你还可以下载我在视频Mix11SVGCanvas.zip中所证实过的源代码。　你也可以参考来自MIX11的2次出色的会话：　如何创造现代化的网站：SVG Meets HTML5　深入研究HTML5　当你研究了所有的这些内容后，你便能理解为何大多数HTML5游戏是使用Canvas而非SVG。Canvas为游戏开发者提供了一种清楚明白的开发模式(较低水平的绘图API)，并且近来也获得大多数浏览器的硬件加速支持。而SVG及其向量式技术仍坚持着在不损失质量的前提下在不同设备间伸缩着。你只需要使用SVG的ViewBox属性便可，之后你的游戏资产便能够轻松地在3至80规格的屏幕上变化着了。　有时候，我们能够使用这两种技术而创造出同样的游戏。例如这里便有一款先使用SVG后使用Canvas的简单游戏：SVG版本的壁球游戏与Canvas的壁球游戏。它们都是源于MSDN文件编制：使用Canvas或SVG编程简单游戏。　在这个例子中，分析每种技术的性能将帮助你决定使用哪种技术去创造游戏。举个例子来说，这里有2个有趣的实验将分别使用SVG和Canvas在你的屏幕上呈现出1000个小球。在这一特殊的例子中，Canvas的性能更能有效地在屏幕上绘制许多对象。而这也是我们想在电子游戏中实现的目标。为了更加清楚地看到性能比较，我们可以着眼于以下图表：　　performance comparison(from webappers)　但是却没有人能够阻止你去混合这两种技术。我们可以想象基于SVG而使用第一层去呈现游戏菜单，并基于canvas而使用第二层去呈现游戏本身的内容。随后你将使用所谓的浏览器合成引擎。不过你也必须关注于最终性能结果，因为在这一领域浏览器和设备是不相等的。并且不要忘记HTML5的主要优势便是瞄准所有平台。　我的同事David Catuhe在几个月前注意到一款小小的摧毁砖块游戏便使用了这种合成原理。第一层使用SVG去打破砖块，然后使用canvas标签让背景呈现出隧道效果。你可以完美地模仿这一理念在背景中呈现游戏(如平台游戏或者射击游戏)而不是隧道中，而你的第一层也可以基于SVG而简单地呈现出菜单和配置选择。　有用的程序库和工具　图像　手动编写SVG的XML节点或使用Canvas较低水平的API总是非常有趣，但却并不高产。以下我将列出一些能够帮助你创造HTML5游戏部分内容的工具和程序库。　为了生成一些SVG，以下是一些很棒的工具：　InkScape：免费的开放源桌面软件　SVG编辑器：这是能够直接在你的浏览器上运行的在线软件　Adobe Illustrator也支持将SVG当成一个输出目标，但这较为昂贵。　如果你正在寻找游戏资产(面向菜单或控制)，你便可以考虑这种免费的图标库：The Noun Project。如果你不幸未能得到设计师的帮助，这一工具便能拯救你。还有另一种带有一些免费SVG内容的程序库：Open Clip Art Library。　最后你需要掌握的一种程序库便是RaphaelJS。这是一种JavaScript程序库，将帮助你通过几行代码而生成动态SVG。你将在网站上发现许多使用基于SVG元素的非线性动画功能以及动画图标的出色演示版本。但是如果你的目标是绘制图表的话，那么你最后需要掌握的便是HighCharts。这2种程序库都非常出色，它们甚