html5Canvas学习笔记(2)圆形

接着上个笔记内容《html5Canvas学习笔记(1)矩形》接着讲，这里讲到的是圆形

圆形

与矩形相比，圆形相对复杂一点，它还需要创建路径，而且每次结束后需要关闭路径。

第一步：在获取图形上下文后，要先创建路径：

cx.beginPath();//创建路径

第二步：圆形函数：

cx.arc(x,y,r,start,end,anticlockwise);//圆形

这里的参数：x和y和矩形一样，都是代表距离原点的距离，r是圆形的半径，start和end代表圆形开始的角度和结束的角度，anticlockwise代表是否逆时针画圆，true代表是逆时针，false代表是顺时针。

第三步：关闭路径

cx.closePath();//关闭路径

第四步：填充描边颜色

cx.fillStyle=”#FFFF00″;//填充颜色

cx.strokeStyle=”#000″;//描边

cx.fill();//填充图形，和矩形不同这里只需要调用fill，因为上述路径已经确定图形大小

cx.stroke();//描边图形，和矩形不同这里只需要调用stroke，因为上述路径已经确定图形大小

 1 var canvas=document.getElementById('canvas');
 2 if(canvas==undefined){
 3 return false;
 4 }
 5 var cx=canvas.getContext('2d');
 6 cx.beginPath();//创建路径
 7 cx.arc(250,250,50,0,Math.PI*2,false);//圆形
 8 cx.closePath();//关闭路径
 9 cx.fillStyle="#FFFF00";//填充颜色
10 cx.strokeStyle="#000";//描边
11 cx.fill();//填充图形，和矩形不同这里只需要调用fill，因为上述路径已经确定图形大小
12 cx.stroke();//描边图形，和矩形不同这里只需要调用stroke，因为上述路径已经确定图形大小

结果是这样的：当然我们可以画出不同角度的圆形：

当然这里可能觉得有几个问题：

1.为什么画出来的不是四分之一圆？这是因为路径结束以后，它是把开始点和结束点进行直线连接，因此当你想画出一个四分之一圆的时候，你需要在圆形加多一个点，这样路径进行直线连接的时候，才能画出一个四分之一圆，在后面的学习笔记中我将讲下怎么画个四分之一圆。

2.逆时针时候，为什么明明是PI*0.5却画出来一个四分之三圆的？

从arc的图解可以看到，圆形的角度是固定的，是定点的，start和end的角度不是说从start划过去多少个角度到end，而是它类似坐标，只不过这个坐标是在圆形周长上。

最后，我们来讲一个有趣的东西，如果我们不关闭路径或者不创建路径会是怎么样的效果呢？

首先我们来画3个圆：

 1 var canvas=document.getElementById('canvas');
 2 if(canvas==undefined){
 3 return false;
 4 }
 5 var cx=canvas.getContext('2d');
 6 /***画黄色圆*****/
 7 cx.beginPath();//创建路径
 8 cx.arc(50,50,25,0,Math.PI*2,false);//圆形
 9 cx.closePath();//关闭路径
10 cx.fillStyle="#FFFF00";//填充颜色
11 cx.strokeStyle="#000";//描边
12 cx.fill();//填充图形，和矩形不同这里只需要调用fill，因为上述路径已经确定图形大小
13 cx.stroke();//描边图形，和矩形不同这里只需要调用stroke，因为上述路径已经确定图形大小
14 /***画蓝色圆*****/
15 cx.beginPath();//创建路径
16 cx.arc(150,50,25,0,Math.PI*2,false);//圆形
17 cx.closePath();//关闭路径
18 cx.fillStyle="#1834F7";//填充颜色
19 cx.strokeStyle="#000";//描边
20 cx.fill();//填充图形，和矩形不同这里只需要调用fill，因为上述路径已经确定图形大小
21 cx.stroke();//描边图形，和矩形不同这里只需要调用stroke，因为上述路径已经确定图形大小
22 /***画黑色圆*****/
23 cx.beginPath();//创建路径
24 cx.arc(100,100,25,0,Math.PI*2,false);//圆形
25 cx.closePath();//关闭路径
26 cx.fillStyle="#000";//填充颜色
27 cx.strokeStyle="#000";//描边
28 cx.fill();//填充图形，和矩形不同这里只需要调用fill，因为上述路径已经确定图形大小
29 cx.stroke();//描边图形，和矩形不同这里只需要调用stroke，因为上述路径已经确定图形大小

接着我们把蓝色的beginPath去掉或者把黑色的beginPath去掉，或者干脆把后面二个的beginPath都去掉，会是怎么样的呢？

从这里我们可以看到一些信息：

1.我们要知道路径都有一个开始点和结束点，当我们去掉蓝色的开始点时候，我们可以知道，在画出了黄色圆时候结束后，画蓝色圆并没有开始点，这意味着：

开始点还是在黄色圆上，因此在画蓝色圆时候，它会从开始点开始画，而路径已经有了一个圆，在这个路径下，会先走一遍路径然后继续画圆，因此黄色圆会被重绘，然后填充的时候填充了2个蓝色的圆，因此可以得到如图的2个蓝色圆。

2.同理我们可以知道2个黑圆，3个黑圆是怎么来的，2个黑圆的开始点是在蓝色圆上，因此画出来2个黑色从蓝色圆开始的。

在画出来3个黑圆时候，笔者发现和预想的不一样，为什么黄色和黑色的有线连接而不是蓝色和黑色？

重新看了一次才知道，因为三个圆都是关闭了路径colsePath，这意味着：

每一次closePath后，下次画圆都是从开始点开始画，因此上述在画黑圆时候，是从开始点黄色圆那边开始画，画完蓝色后回到黄色圆然后画黑色圆。如果要蓝圆和黑圆之间有线连接，需要把蓝色圆的closePath去掉。

这里为了看得清楚，我把填充的去掉，可以看到，黄圆连接到蓝圆然后连接到黑圆，最后黑圆一旦关闭路径colsePath，路径将回到开始点，因此黑圆和黄圆也被连接起来。

林伟健前端博客

圆形

公告