零基础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();
如下图：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
