SOURCE

console 命令行工具 X clear

                    
>
console
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// context.arc(x,y,r,sAngle,eAngle,counterclockwise);
// 参数值
// 参数	描述
// x	圆的中心的 x 坐标。
// y	圆的中心的 y 坐标。
// r	圆的半径。
// sAngle	起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
// eAngle	结束角,以弧度计。
// counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。


// 弧度1
ctx.beginPath();
ctx.translate(50, 50); 
ctx.moveTo(0, 0); 
// 旋转弧度,需将角度转换为弧度,使用 degrees/180 * Math.PI 公式进行计算。
ctx.rotate((30) / 180 * Math.PI);
ctx.arc(0,0,50,0,60/180 * Math.PI);
ctx.stroke();  
 

// 弧度2
ctx.beginPath(); 
ctx.moveTo(0, 0);
ctx.rotate((90) / 180 * Math.PI);
ctx.arc(0,0,50,0,30/180 * Math.PI);
ctx.stroke();


// 弧度3
ctx.beginPath(); 
ctx.moveTo(0, 0);
ctx.rotate((60) / 180 * Math.PI);
ctx.arc(0,0,50,0,60/180 * Math.PI);
ctx.stroke();

// 弧度4
ctx.beginPath(); 
ctx.moveTo(0, 0);
ctx.rotate((90) / 180 * Math.PI);
ctx.arc(0,0,50,0,60/180 * Math.PI);
ctx.stroke();
 
<canvas id="myCanvas" width="700" height="750" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
 
body{
    background:#FFF;
}