首页 > 代码库 > 零基础HTML5游戏制作教程 第2章 简单图形的绘制
零基础HTML5游戏制作教程 第2章 简单图形的绘制
第二章 简单图形的绘制
HTML5支持使用Canvas和SVG等方式在网页直接绘制图形。其中SVG适合用来绘制高质量的矢量图形,不适合用来做游戏,所以我们做游戏一般使用Canvas。
由于本教程以简单为原则,所以在初学阶段请不要把注意力分散到美工、画质等细节,我们只需要掌握矩形、多边形、圆形等简单图形的绘制,并对这些图形编程,使之具有一定的运动能力和游戏效果。
(如果你偷懒,你甚至可以跳过本章中多边形和圆形的绘制,只学矩形,然后直接去看下一章。)
一,矩形的绘制
命令的格式是context.fillRect(x,y,width,height)
其中参数x为矩形的左上角坐标,y是右上角坐标,width是矩形的宽度(像素点),height是矩形的高度(像素点)。
绘制之前,一般还要指定充填的颜色,不指定的话默认为黑色。
命令是context.fillStyle=“green”;
比如,你要做一个绿色的小方块的话,可以这样实现:
context.fillStyle=“green”;context.fillRect(30,30,100,100);
看起来是这样的(如图)。这只是一个静态的方块,下一章会讲到怎么让她动起来。
二,多边形的绘制
多边形的绘制比矩形要稍微复杂一点,因为Canvas只提供了矩形的直接绘制的函数,其他多边形要一条一条线条地自己绘制。
需要用到5个函数,分别是context.beginPath();context.moveTo();context.lineTo();context.closePath();context.fill();
各函数的作用分别如下:
context.beginPath();用于开始一个新路径
context.moveTo();用于将canvas的当前坐标移动到指定位置
context.lineTo();用于绘制一条当前点到指定点的线段
context.closePath();用于将当前点和起始点连接,从而得到一个闭合的图形
context.fill();用于充填颜色。
下面以最简单的多边形,三角形为例
context.beginPath();context.moveTo(100,100);context.lineTo(50,200);context.lineTo(150,200);context.closePath();context.fillStyle="green";context.fill();
得到的三角形如下图。
三,圆形的绘制
其实电脑绘制的是一段圆弧,最后通过closePath()首尾相接。
需要用到的函数是context.arc(x,y,r,sAngel,eAngel,countclockwise);
其中x为圆心横坐标,y为圆心纵坐标,r为半径,sAngel为起始角度(用弧度表示),eAngel为结束角度(以弧度表示),countclockwise为可选项,指定顺时针或逆时针方向。
下面结合多边形的画法,画一个缺一个角的圆圈。
context.beginPath();context.arc(100,100,50,0,1.5*Math.PI);context.lineTo(100,100);context.closePath();context.fillStyle="green";context.fill();
如下图:
零基础HTML5游戏制作教程 第2章 简单图形的绘制