HTML5 Canvas实现贪吃蛇（一）

最近想做一点游戏方面的东西，结合比较热的html5，就像尝试着做一个简单的小游戏。于是就有了这个贪吃蛇。

HTML5 Canvas

html5中的canvas就是一张空白的画布，可以通过javascript控制上面的内容，绘制想要的图形，精确到像素级。页面呈现是，会以图片的形式加载出来，同时还可以继续通过javascript改变上面的图形，从而做出简单的动画效果。

如上所述，canvas上的内容可以用javascript绘制，canvas在html中声明如下：

<canvas id="a" width="500" height="650"></canvas>

这里要注意一点，就是canvas最终是以图片的形式呈现在html页面中，所以这里的width和height代表canvas这张图片原始的大小（canvas默认的大小是300*150），如果使用外部css来设定canvas的长和宽，不与本身的长和宽相同，就会出现缩放或者拉伸的效果。

通过javascript绘制图形也是很简单的：

var c = document.getElementById("a");
var cc = c.getContext("2d");
cc.beginPath();
cc.fillStyle = "#FFFFFF";
cc.lineWidth = lineWidth;
cc.arc(100,100,5.6, 0, Math.PI * 2, true);
cc.stroke();
cc.closePath();

document.getElementById：获取到canvas对象；

getContext：获取canvas的Context对象，实际的画图操作是Context来完成的；

beginPath：开始画图；

fillStyle：设定画笔颜色；

lineWidth：设定画笔粗细；

arc：画个圆；

stroke：把图形真正的绘制到canvas上；

closePath：结束画图；

这里说明以下几点：

1. canvas只是一张画布，画图操作是Context对象完成的；

2. beginPath和endPath很必要，否则多次调用会出现重复绘制的情况；

3. 像arc、lineTo这样的绘制方法，并不是直接绘制到canvas上，就像打草稿，先是心中有数，做到胸有成竹，最后通过stroke、fill等方法真正的绘制到canvas上。

好了，这样基本就可以在canvas上绘制实心圆了。既可以做蛇身，也可做食物，大功告成！