HTML5 Canvas 開發 繪圖方法整理 【四、canvas曲線圖形 / 圓形】
阿新 • • 發佈:2019-02-03
其實在Canvas 中的基本圖形就只有兩個 : 直線圖形 和 曲線圖形 。
圓形也算是在曲線圖形中,一般畫圓的時候必須配套使用 beginPath() 和 closePath(),圓形屬於一個“閉合圖形”,先在畫布上開闢一個路徑,畫完以後結束路徑。
語法:
ctx.beginPath();
ctx.arc(x,y,半徑,開始角度,結束角度, 是否逆時針繪製); 預設為false
ctx.closePath();
ctx.stroke();
自己畫的一個簡單的解說圖:(`・ω・´)
程式碼:
let cans=document.getElementById ("fourthlyC");
let ctx=cans.getContext("2d");
ctx.beginPath(); //開始新路徑
ctx.arc(150,100,70,0,180*Math.PI/180,true); //以畫布X軸 座標150 Y軸座標300點為圓心 畫一個半徑長70,度數為180,的圓,逆時針旋轉
ctx.closePath(); //結束這次繪圖路徑,不影響其他
ctx.stroke(); //以描邊方式顯示這個圓
//角度的單位建議寫 *Math.PI/180 這樣設定了多少度一目瞭然
ctx.beginPath();
ctx.arc(550,100,70,0,180*Math.PI/180);
//最後一個值不寫預設是不旋轉的
ctx.closePath();
ctx.strokeStyle="#1AC6FF"; //定位圓邊的顏色
ctx.stroke();
效果圖:
也可以同時繪製兩個圓形疊加在一起:
//給圓 填充上顏色
ctx.beginPath();
ctx.arc(550,400,150,0,360*Math.PI/180);
ctx.closePath();
ctx.fillStyle="#f00" ;
ctx.fill();
//第二個圓
ctx.beginPath();
ctx.arc(550,400,100,0,360*Math.PI/180);
ctx.closePath();
ctx.fillStyle="#FFFC43";
ctx.fill();
效果圖:
然後再來說說另一個:
畫弧線
畫弧線與畫圓 最大區別就是不使用closePath() 這個方法,弧線不屬於“閉合圖形” 所以並不需要封閉它;
closePath()主要是用來連線起點和終點
語法:
ctx.beginPath();
ctx.arc(x,y,半徑,開始角度,結束角度, 是否逆時針繪製);
ctx.stroke();
ctx.beginPath();
ctx.arc(150,400,100,0,270*Math.PI/180);
ctx.strokeStyle="#391C9B";
ctx.stroke();
效果圖: