【canvas】畫布畫圓

畫圓的角度：

PI=180度

 

繪制圓的語法:

c.arc(x坐標，y坐標，r，開始角度(弧度)，結束角度(弧度)，是否是逆時針方向)

 

弧度的計算公式:

180°/π=60°/60度所對應的弧度

由上面的等式演變計算“60度所對應的弧度”=60*π/180

 

 

 

 

 第一丶畫閉合的圓弧路徑圖:

        var canvas=document.querySelector("#chen");//找到畫布才能操作
        var c=canvas.getContext('2d');//定義畫布為2d
        c.beginPath();
        c.moveTo(150,100);//定圓心
        c.arc(150,100,60,160*Math.PI/180,270*Math.PI/180);//畫圓弧
        c.closePath();//讓圓弧和圓心連接起來形成一個閉合路徑
        c.stroke();//繪圖
        c.fillStyle="#bece25";//設置填充顏色，填充顏色是狀態的所以是公用的，如果要其他要填充的地反填充別的顏色需要重新設置
        c.fill();//進行填充    

結果為:

第二丶畫餅裝圖

        var canvas=document.querySelector("#chen");//找到畫布才能操作
        var c=canvas.getContext('2d');//定義畫布為2d
        c.beginPath();
        c.moveTo(150,100);//定圓心
        c.arc(150,100,60,160*Math.PI/180,270*Math.PI/180);//畫圓弧
        c.closePath();//讓圓弧和圓心連接起來形成一個閉合路徑
        c.stroke();//繪圖
        c.fillStyle="#bece25";//設置填充顏色，填充顏色是狀態的所以是公用的，如果要其他要填充的地反填充別的顏色需要重新設置
        c.fill();//進行填充

        c.beginPath();
        c.moveTo(150,100);
        c.arc(150,100,60,270*Math.PI/180,60*Math.PI/180);
        c.closePath();
        c.stroke();
        c.fillStyle="#f88";
        c.fill();

        c.beginPath();
        c.moveTo(150,100);
        c.arc(150,100,60,60*Math.PI/180,160*Math.PI/180);
        c.closePath();
        c.stroke();
        c.fillStyle="#f1b913";
        c.fill();

結果為: