html5Canvas學習筆記 2 圓形

與矩形相比，圓形相對複雜一點，它還需要建立路徑，而且每次結束後需要關閉路徑。

第一步：在獲取圖形上下文後，要先建立路徑：

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');
2if(canvas==undefined)
5var 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');
2if(canvas==undefined)
5var 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，路徑將回到開始點，因此黑圓和黃圓也被連線起來。

html5Canvas學習筆記 2 圓形

HTML5 canvas畫布學習例項

Html5 Canvas學習之路（三）

HTML5 Canvas學習筆記之詳解弧線的繪製

html5Canvas學習筆記 2 圓形

HTML5 canvas畫布 學習例項

Html5 Canvas學習之路（三）

HTML5 Canvas學習筆記之詳解弧線的繪製

相關推薦

HTML5 canvas畫布學習例項