詳解JavaScript中的arc的方法

時間 2019-11-08

原文原文鏈接

今天說說JavaScript在網頁中畫圓的函數arc！html

1、arc所須要的參數設置微信

1	`arc(x, y, radius, startAngle, endAngle, counterclockwise);`

其中x,y,radius都很容易理解，那麼重點說說startAngle,endAngle和counterclockwise三個參數！函數

2、arc參數詳解spa

1，startAngle和endAngle分別指圓開始的角度和結束的角度，手冊上面說的是開始的角度爲0，結束的角度爲Math.PI*2，這樣正好畫一個圓code

2，下面經過實例來說解startAngle和endAngle（注意html的代碼我沒有寫）htm

 
       var  
       c = document.getElementById( 
       'myCanvas' 
       ); 
      
 
       var  
       cxt = c.getContext( 
       "2d" 
       ); 
      
 
       cxt.fillStyle= 
       "#FF0000" 
       ; 
      
 
       cxt.arc(70, 30, 25, 0, 1,  
       false 
       ); 
      
 
       cxt.stroke(); 
      

我將開始角度設爲0，結束角度設爲1，這樣以下圖ip

 
       var  
       c = document.getElementById( 
       'myCanvas' 
       ); 
      
 
       var  
       cxt = c.getContext( 
       "2d" 
       ); 
      
 
       cxt.fillStyle= 
       "#FF0000" 
       ; 
      
 
       cxt.arc(70, 30, 25, 0, 1,  
       false 
       ); 
      
 
       cxt.stroke(); 
      

我將開始角度設爲1，結束角度設爲2，這樣以下圖ci

上面咱們能夠看出第一張圖的終點就是第二張圖的起點，也就是說一個圓有無數個角度，只要你設置了開始角度和結束角度，它就能夠以圓弧的形狀將兩點連起來！而起點和終點的差值就是圖上兩點的長度！當起點和終點的差值能夠是兩點重合時，就造成了圓！知道這一點咱們就能夠製做動態圓get

3，counterclockwise是指是逆時針(true)仍是順時針(false)博客

你們看，當我將起點設置爲0，終點爲1，選擇順時針時

 
       var  
       c = document.getElementById( 
       'myCanvas' 
       ); 
      
 
       var  
       cxt = c.getContext( 
       "2d" 
       ); 
      
 
       cxt.fillStyle= 
       "#FF0000" 
       ; 
      
 
       cxt.arc(70, 30, 25, 0, 1,  
       false 
       ); 
      
 
       cxt.stroke(); 
      

當我將起點設置爲0，終點爲1，選擇逆時針時

 
       var  
       c = document.getElementById( 
       'myCanvas' 
       ); 
      
 
       var  
       cxt = c.getContext( 
       "2d" 
       ); 
      
 
       cxt.fillStyle= 
       "#FF0000" 
       ; 
      
 
       cxt.arc(70, 30, 25, 0, 1,  
       true 
       ); 
      
 
       cxt.stroke(); 
      