零基础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();

如下图：