canvas入門——圓繪製

arc

語法:arc(x, y, radius, startAngle, endAngle, anticlockwise)

前面兩個參數是x座標,y座標,第三個參數是半徑,第四個參數是開始的弧度,第五個參數是結束的弧度,第六個參數是順時針還是逆時針,默認是順時針。

看下面代碼,這樣就能繪製一個圓了。

ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.stroke()

效果圖:

1.png

這裏要說明的一點是,不管順時針還是逆時針,圓的弧度的位置是不變的,不會因爲順勢轉或者逆時針而改變,0.5pi的位置

2.png

ctx.arc(100, 100, 50, 0, 1.5 * Math.PI)
ctx.stroke()

3.png

ctx.arc(100, 100, 50, 0, 1.5 * Math.PI,true)
ctx.stroke()

4.png

上面代碼第一個是順時針繪製的,3/4 個弧度,用逆時針的話就是 1/4 個弧度,它的意思是從 0 開始,順時針到 1.5pi的位置

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章