HTML5 Canvas arc()函數 八卦圖示例

實例

創建一個圓形：

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(100,75,50,0,2*Math.PI);ctx.stroke();

瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。

注釋：Internet Explorer 8 或更早的瀏覽器不支持元素。

定義和用法

arc() 方法創建弧/曲線（用于創建圓或部分圓）。

提示：如需通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 2*Math.PI。

提示：請使用 stroke() 或 fill() 方法在畫布上繪制實際的弧。

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)

起始角：arc(100,75,50,0,1.5*Math.PI)

結束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

如果要創建一個圓形，我們可以使用arc()方法。

語法：arc(定義一個中心點，半徑，起始角度，結束角度，和繪圖方向：順時針或逆時針)

代碼：context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

HTML5 Canvas Arc 說明：

八卦圖示例代碼：

程序效果如下：

無標題文檔