最近想做一点游戏方面的东西,结合比较热的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上绘制实心圆了。既可以做蛇身,也可做食物,大功告成!