首页 > 代码库 > 零基础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章 简单图形的绘制