canvas的arc 方法詳解

2021-07-04 04:56:40 字數 1022 閱讀 8444

在做專案時畫曲線時主要用的就是arc()畫圓弧的方法:

context.arc(x,y,r,sangle,eangle,counterclockwise);
即:

arc(圓心的x座標,圓心的y座標,圓的半徑,起始角(以弧度計,即l圓心的3點鐘位置是0度),結束角,規定應該是順時針還是逆時針畫圖)

其中最後乙個引數是可選的,true=逆時針,false =順時針

例:如果是畫下面這樣乙個圓弧的話,其實**可以這樣寫:

//第一段圓弧

cvt.beginpath();

//弧度 = 角度 * math.pi/180

cvt.arc(270,115,176,-41*math.pi/180,20*math.pi/180,false); //順時針 319與-41是一樣的

cvt.strokestyle = "#ff0000";

cvt.stroke();

由於是在起始角的上面開始向下畫的,-41代表的就是從起始角的上面開始畫的,因為是順時針,所以就從負的角度開始畫,然後度數一直在增大直到0度,然後再增大到20度,至此,一段圓弧畫完。另外還有一層意思是319與-41是一樣的,因為如果把這段圓弧的起始角定為319,那順時針向下畫時角度也是在增大的,直到360度,然後再從0度再增大到20度,也是可以畫出一樣的圓弧的。

再舉一下逆時針的例子:如下圖

上圖所示需要的**為:

//第二段圓弧

cvt.beginpath();

//弧度 = 角度 * math.pi/180

cvt.arc(639,247,216,-160*math.pi/180,-280*math.pi/180,true); //逆時針 -160與200是一樣的

cvt.strokestyle = "#ff0000";

cvt.stroke();

其中圓弧的起始角為-160度,而這也與200度是一樣的(360+(-160)= 200),因為是逆時針,所以角度是減小的,從-160到-280就畫出了上圖的圓弧。反之,從200到80也可以完全畫出一樣的圓弧。

用canvas的arc繪製時鐘

在頁面上加入canvas標籤 body canvas id c1 width 600px height 600px span 不支援canvas瀏覽器 span canvas body js部分 繪製秒的刻度的思路是先用ogc.stroke 迴圈畫60個6 的扇形,將它們拼接成一整個圓,然後用ogc...

Canvas的drawText方法詳解

通過canvas的一些方法畫圓,畫矩形或者影象的時候,我們都需要有有乙個定位座標,即把圓或者矩形,畫在畫布上的上面位置,如 思考 如果我們畫的是文字,那又改採用什麼樣的規則去畫呢?1 四線格與基線 小時候,我們在剛開始學習寫字母時,用的本子是四線格的,我們必須把字母按照規則寫在四線格內。比如 那麼問...

ARC的原理詳解

1,arc的本質 arc本質是nsautoreleasepool的直接應用,autorelease 其中 1,magic是魔術數字,劃分記憶體邊界,資料結構起始處 2,next,是指向該autoreleasepool的邊界 3,thread,是該autoreleasepool的執行緒,每個執行緒有自...