首先一点就是，本测试使用的时html5的画布canvas来绘制所有的东西，使用的时js控制，所以务必要求流浪器支持HTML5才行。

步骤：
第一点：先写出基本的布局，也就是你要在什么位置画图，以及你的画布有多大，这些都是要实现设定好的，这里是在HTML标签里面预设，还有就是在css里面设置。
第二点：再则有了画布，这时我们就可以考虑如何画出一个棋盘，这里采用的是画线的形式，因为在canvas里面可以直接画各种图形，我们可以在里面利用画线的方法，画出整个棋盘。主要要获取了画布之后再画图。
第三点：要想画出整个棋盘，那必须还有棋子，棋子这里使用的时现有的图片，我们就需要预加载所有的图片，这里非常重要的一点就是，在我们上一篇文章中提到的就是要等图片加载完全了，我们才能在画布上绘制，否则是绘制不出来的。
第四点：我们绘图要绘制在哪里呢？这点也是需要注意的，我这里采用的是预先设置的数组，然后保存好相对应的key键值，这样在我们加载完全了图片的时候我们就知道绘制的点是相应的键值的地方。
第五点：由于棋盘式绘制出来的，所以是均匀的，这里我们就要确定每个棋子具体的象素点是在哪里了，要预先设置要相应的X轴和Y轴的空间间距，反正我是多次试验得出的。~~~之后就可以直接在相应的键值上绘制图片了。~

一下附上我测试的代码，如有觉得不好，请尽管喷~！