绘制矩形

 

　　有三个函数可以用于绘制矩形，分别是：

 

　　以上三个函数都有四个参数，其中x,y表示矩形左上角的坐标，即相对于原点的位置；width,height指定了矩形的宽高。

 

　　其中，fillRect（）方法用fillStyle属性所指定的颜色、渐变和模式来填充指定的矩形；strokeRect（）方法所绘制的矩形边框，线条的颜色和线条宽度由strokeStyle和lineWidth属性指定。矩形边角的形状由lineJoin属性指定。

 

　　绘制矩形示例：

 

　　这个例子，fillRect（）方法绘制了一个100X100的黑色矩形（没有使用fillStyle设置填充色的话，默认的都是黑色的背景），它左上角的坐标为（25,25）；接着，clearRect（）方法在原先的基础上，清除了一个60×60的矩形，它左上角的坐标是（45,45）；最后，利用strokeRect（）方法，绘制了一个50×50大小的矩形边框，它左上角的坐标为（50,50）。

 

　　绘制路径

 

　　与绘制路径相关的函数有：

 

　　beginPath（）丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为（0,0）。当一个画布的环境第一次创建时，beginPath（）方法会被显示地调用。

 

　　closePath（）创建从当前点到开始点的路径。

 

　　stroke（）方法绘制当前路径的边框。它意味着画轮廓，但是线条的可视化取决于strokeStyle、lineWidth、lineJoin、lineCap和miterLimit等属性。

 

　　fill（）方法用于填充路径，默认是黑色。fill（）方法使用fillStyle属性所指定的颜色、渐变和模式来填充当前路径。当调用该方法时，开放的路径会自动闭合。

 

　　绘制路径需要经过下面四个步骤：

 

　　第一步：用beginPath创建一条路径。

 

　　第二步：实际绘制路径的部分。

 

　　第三步：调用closePath方法关闭路径。如果图形已闭合或者它只是一个点，那么这个方法将什么也不会做。这一步不是必须的

 

　　第四步：调用stroke或fill方法，绘制边框或者填充路径。

 

　　绘制路径示例：

 

　　上面这个例子，绘制了一个三角形。首先，利用beginPath（）方法创建一条路径；moveTo（）方法将点移动到坐标（75,50）（moveTo（）方法接下来就会讲到）；lineTo（）方法画了两条直线；最后调用fill（）方法填充路径，调用了这个方法后，路径就自然闭合了，所以不必再调用closePath（）方法来闭合路径。

 

　　moveTo（）方法

 

　　上面的例子有用到moveTo（）这个方法，这边就来说说moveTo（）方法。语法如下：

 

　　moveTo（）方法用于定位绘画的位置，即将点移动到参数x,y所指定的坐标位置。

 

　　canvas初始化或者调用了beginPath（）方法时，绘画开始的位置即原点（0,0），使用moveTo（）方法，我们可以将起始位置移动到任何我们想要的地方。

 

　　moveTo（）的使用实例：

 

　　绘制各种线条

 

　　用lineTo（）方法来画直线。

 

　　lineTo（）方法接受终点的坐标（x,y）作为参数。起始坐标取决于前一路径的终点坐标。当然，起始坐标也可以通过前面介绍的moveTo（）方法来设置。

 

　　绘制线条示例：

 

　　上面的例子利用lineTo（）方法绘制了两个三角形。从这个例子也可以看出fill和stroke的区别。

 

　　绘制弧线

 

　　用arc方法来绘制弧线或圆。

 

　　该方法接受五个参数。其中，x,y是圆心坐标；radius是圆的半径；startAngle和endAngle分别是起末弧度（以x轴为基准）；anticlockwise为true表示逆时针，反之为顺时针。

 

　　这边有一点是需要注意的，就是arc方法里的角度是以弧度为计算单位的，不是度。这么说吧，通常我们说的180度，就等价于PI。两者的计算公式是这样的：radians=（Math.PI/180）*degrees.（其中，radians代表弧度，degrees代表度）

 

　　绘制圆弧示例：

 

　　上面这个例子，用双层循环输出了4*4的圆弧矩阵。

 

　　贝塞尔和二次方曲线

 

　　最后，要说的是贝赛尔曲线，它可以是二次和三次的形式，一般用于绘制复杂而有规律的形状。

 

　　二次贝赛尔曲线：

 

　　其中，cpx指控制点的x坐标；cpy指控制点的y坐标；x指结束点的x坐标；y指结束点的y坐标。

 

　　由上面的参数可以看出，二次贝赛尔曲线需要两个点：第一个点用于二次贝赛尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，可使用beginPath（）和moveTo（）方法来定义。

 

　　一个简单的二次贝赛尔曲线实例：

 

　　三次贝赛尔曲线：

 

　　其中，cp1x为第一个控制点的x坐标；cp1y为第一个控制点的y坐标；cp2x为第二个控制点的x坐标；cp2y为第二个控制点的y坐标；x为结束点的x坐标；y为结束点的y坐标。

 

　　由上面可以看出，三次贝赛尔曲线需要三个点。前两个点用于三次贝赛尔计算中的控制点，第三个点是曲线结束的控制点。同上，曲线的开始点是当前路径中最后一个点。如果路径不存在，可使用beginPath（）和moveTo（）方法来定义。

 

　　使用二次方和三次方的贝塞尔曲线是相当有挑战的，因为不像在矢量绘图软件 Adobe Illustrator 里那样有即时的视觉反馈。因为用它来画复杂图形是比较麻烦的。但如果你有时间，并且最重要是有耐心，再复杂的图形都可以绘制出来的。下面我们来画一个简单而又规律的图形。

 

　　一个简单的三次贝赛尔曲线实例：