用 HTML5 Canvas 做游戏（一）

　　HTML5 已经弓饶倚局诞生很多年了，在 Canvas 上开发游戏也不再是一件新鲜事。如果某一天你能够在朋友们面前炫耀自己亲手制作的游戏作品，而且这个游戏具有美观漂亮的画面，那一定是件很拉拗圯匆锢风的事情！

　　那么有多少人自己动手写过游戏呢？有人说那太难太复杂了，而我要说：不！你觉得游戏难做是因为你不了解其中的奥秘。我将逐步给你解释、介绍如何使用 Canvas 制作开发符合你脑海中想象的游戏，由简入繁地慢慢深入，并且告诉你如何把你的作品发布在移动设备（诸如我们十分喜爱的就是Android或iPhone手机）上。

　　当然这篇文章并不是教授基本编程语言或者逻辑概念的，所以我希望正在阅读此文的你应该具备如下知识或经验：

　　　1）基本的HTML（以及CSS）知识——不需要了解太多，但毕竟我们的程序（游戏）是运行在HTML环境中，或者说是在浏览器中运行的。

　　　2）Javascript语言编程经验——这个是主体，在部分内容里将会有比较高深的写法出现（开玩笑的，别被我吓倒）。

　　　3）初中级别的几何数学常识——主要是三角函数的运用，你得知道如何换算角度以及坐标，这将保证你游戏中的物体有个正确的位置。

　　好了，让我们开始吧！

　　如图，先把我们的 html 文件写出来，这是整个程序的宿主和载体。

　　哎呀！我们的 Canvas 在哪儿？！别着急，因为 Canvas 也是一个 HTML 的控件，你想要看到它的话请照我说的做，我们把 Canvas 标签的 style 属性加点内容。

　　我们之后所有的代码效果都会在这个方框的范围内显示出来，但是需要注意的是超出这个范围的区域里可能是有内容的，只是我们可视范围只有这么大的一块。因而我在这里依然需要引入并介绍Canvas 的坐标系。

　　我前面说过了，整个 Canvas 的原点在左上角，画出来的图形的起始坐标点也在图形自己的左上角，那么要把图形画到Canvas 的正中央去就要把坐标算一下。如上图，我们的 Canvas 宽度w = 500 ，高度 h = 450 ，如果单纯把小方块按照 context.fillRect(w/2,h/2,50,50); 的方式来画的话最终结果是小方块自己左上角在坐标 （w/2, h/2）的位置，而不是小方块中心在该坐标。如下图即为错误的代码和效果。

　　因而需要把小方块的绘制坐标分别往左和往上移动一些，也就是向 x 轴负方向和 y 轴负方向移动。该移动多少？半个小方块的宽度和高度，我们这里正好是正方形所以一半就是 25 个像素。如果今后处理动态的图形或者图片也需要进行相应的计算。现在我们就把小方块正确的坐标算出来：x 坐标应该是 w/2 再要减去 25 （往左面，负方向移动）， y 坐标则是 h/2 再减去 25 （往上面，负方向移动）。好了，正确的画法出来了 context.fillRect(w/2-25,h/2-25,50,50); 注意后面两个参数没有变化，因为这后面两个参数是画图形大小，和坐标没有关系，我们要一个大小仍旧为 50x50 像素的正方形。

　　很好！你成功迈出了重要的一步，那就是你可以掌握坐标和图形的位置了。简单回顾一下这一篇文章讲过的内容。我们一起创建了一个基本的 html 文件作为整个程序运行的载体，我告诉了你一个判别浏览器是否支持 HTML5 的简易方法，教你在 Canvas 中画了一个方块，以及如何确定图形坐标的方法。当然在 Canvas 中不仅仅可以画图，还可以写入文本，在本章结束前我给你留一段代码向你演示如何使用 fillText 方法显示文本，只不过我用文本的方式画了一颗心形。希望能够引起你的兴趣从而继续深入学习和探索 Canvas 的绘图功能。