HTML5 已经诞生很多年了，在 Canvas 上开发游戏也不再是一件新鲜事。如果某一天你能够在朋友们面前炫耀自己亲手制作的游戏作品，而且这个游戏具有美观漂亮的画面，那一定是件很拉风的事情！
【资料图】
那么有多少人自己动手写过游戏呢？有人说那太难太复杂了，而我要说：不！你觉得游戏难做是因为你不了解其中的奥秘。我将逐步给你解释、介绍如何使用 Canvas 制作开发符合你脑海中想象的游戏，由简入繁地慢慢深入，并且告诉你如何把你的作品发布在移动设备（诸如我们十分喜爱的就是Android或iPhone手机）上。
当然这篇文章并不是教授基本编程语言或者逻辑概念的，所以我希望正在阅读此文的你应该具备如下知识或经验：
1）基本的HTML（以及CSS）知识——不需要了解太多，但毕竟我们的程序（游戏）是运行在HTML环境中，或者说是在浏览器中运行的。
2）Javascript语言编程经验——这个是主体，在部分内容里将会有比较高深的写法出现（开玩笑的，别被我吓倒）。
3）初中级别的几何数学常识——主要是三角函数的运用，你得知道如何换算角度以及坐标，这将保证你游戏中的物体有个正确的位置。
好了，让我们开始吧！
如图，先把我们的 html 文件写出来，这是整个程序的宿主和载体。
如果你的浏览器不支持 HTML5 或者不支持 Canvas 那么你将有幸看到代码中的文字：“do not support HTML5”。否则就可以在浏览器中看到正确的结果。
哎呀！我们的 Canvas 在哪儿？！别着急，因为 Canvas 也是一个 HTML 的控件，你想要看到它的话请照我说的做，我们把 Canvas 标签的 style 属性加点内容。
然后再看效果，怎么样？看到我们的 Canvas 了吧。
我们之后所有的代码效果都会在这个方框的范围内显示出来，但是需要注意的是超出这个范围的区域里可能是有内容的，只是我们可视范围只有这么大的一块。因而我在这里依然需要引入并介绍Canvas 的坐标系。
和绝大多数计算机图形坐标系一样， Canvas 的原点也在画面左上角（也就是 Canvas 的左上角），向右是 x 轴正方向，向下是 y 轴正方向。在从原点开始到Canvas 边界为止正方向上的所有内容都是可见的，超出这个范围的部分，包括负方向（x 轴或 y 轴）和边界外的内容是看不到然而有时确实是存在的。你一定注意到了”边界“这个词，回头看看我们的代码里定义过的那个 Canvas 是不是有两个属性 width 和 height （宽度和高度）？所以这个 Canvas 的可视范围就是原点开始到宽500个像素，高450个像素的区域。
现在让我们来画点什么吧，一个白板太难看了。而且老实说，白色太刺眼。于是我决定把代码稍作修改，给 body 标签加上背景色，把 Canvas 的背景色也调整一下。这样舒服多了。
在 Canvas 中绘制图形图片需要创建 Context 我们可以直接从 Canvas 获取。Canvas 可以提供 2D 和 3D 的绘制工具（Context），我们还是先从 2D 入手吧，我保证以后会介绍 3D 的。那么首先要取得 Canvas 控件，这用 document.getElementById(ElementName ); 就可以获得，之后调用 Canvas 的方法 getContext("2d"); 取得 Context 。Canvas 图形编程的第一个秘密：所有图形的绘制通过 Context 完成！即便是 3D 图形也是如此，只不过参数需要替换一下变成getContext("3d"); 并且绘制方式会有不同。
所以，现在你应该在脑海里有了这么两段代码：
varcanvasObj = document.getElementById("cvs");
var context = canvasObj.getContext("2d");
第一行取得 Canvas 控件，第二行获取 Context 实例，接下来对 Context 的实例进行设置并使用就可以绘制出图形。想象一下你在画画的时候有过的一些步骤（你一定画过，不论是好还是坏），首先拿起笔，然后蘸上颜料，最后才在纸张或者画布上面涂抹。既然 Canvas 直译过来就是”画布“，那么就把我们的 Context 当作画笔吧，它也需要先配置好笔形、颜料最后才能够绘图。
context.fillStyle = "#ffffaa";
context.fillRect(0,0,50,50);
先设置画笔以填充方式绘制时所需要的颜色，然后用填充的方法绘制一个矩形（说白了就是画出一个实心的矩形）。fillRect(0,0,50,50); 第一个和第二个参数代表坐标，第三个参数表示宽度，第四个参数表示高度。这将在 Canvas 上原点为起点绘制大小为 50x50 像素的正方形，请注意这个正方形的左上角是坐标点，这就是 Context 绘图的规则。所有图形绘制都以图形的左上角作为坐标点。
我得警告你！如果你按照这段代码像下图中这么写出来的话（当然是在 <script> 标签内）是不会看到任何效果的，这是因为有可能浏览器还没有完全加载完成，而这时去获取 Canvas 控件就会因为找不到目标而报错。
为了避免这种错误，我们可以先确保浏览器加载已经完成后再去获取控件。加入一个事件机制，只有当浏览器加载完成了才进行 Canvas 的相关操作。同时还可以做一个判断，看看能否取回正确的 Context 。
没错！你已经画出一个小小的黄色方块了。那么，我们已经进行到这一步了，为什么不再继续往前多进步一点呢？让我们试着把这个小方块放置到 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 的绘图功能。
