01圆形入门

<!--1. canvas标签，有宽度和高度-->
<canvas id="mycanvas" width="1000" height="600"></canvas>

<script type="text/javascript">
    //2. js中获取画布对象
    var canv=document.getElementById("mycanvas");
    
    //3. 上下文中设置绘图方式
    var ct=canv.getContext("2d");  //webgl就是3d效果
    
    //4. 绘制圆形的语法：
    //ct.arc(x: Number, y: Number, radius: Number, startAngle: Number, endAngle: Number, anticlockwise: Boolean)
    //x: Number, y: Number  圆心的坐标
    //radius: Number        半径的大小
    //startAngle: Number, endAngle: Number   开始的角度和结束的角度
    //anticlockwise: Boolean  是否逆时针绘制，默认false顺时针  /  true逆时针
    //2个PI就是一个正圆，表示360deg，1个PI就是一个半圆，表示180deg
    //弧度和角度的转换公式： rad = deg*Math.PI/180;   比如：90度的弧形rad=90*Math.PI/180=0.5Math.PI
    
    //4-1. 正圆
    ct.strokeStyle="red";
    ct.lineWidth=3;
    
    var x=canv.width/2;
    var y=canv.height/2
    ct.arc(x,y,100,0,360,false);
    
    ct.stroke();
</script>

02圆形进阶

<!--1. canvas标签，有宽度和高度-->
<canvas id="mycanvas" width="1000" height="600"></canvas>

<script type="text/javascript">
    //2. js中获取画布对象
    var canv=document.getElementById("mycanvas");
    
    //3. 上下文中设置绘图方式
    var ct=canv.getContext("2d");  //webgl就是3d效果
    
    //4. 绘制圆形的语法：
    //ct.arc(x: Number, y: Number, radius: Number, startAngle: Number, endAngle: Number, anticlockwise: Boolean)
    //x: Number, y: Number  圆心的坐标
    //radius: Number        半径的大小
    //startAngle: Number, endAngle: Number   开始的角度和结束的角度
    //anticlockwise: Boolean  是否逆时针绘制，默认false顺时针  /  true逆时针
    //2个PI就是一个正圆，表示360deg，1个PI就是一个半圆，表示180deg
    //弧度和角度的转换公式： rad = deg*Math.PI/180;   比如：90度的弧形rad=90*Math.PI/180=0.5Math.PI
    
    //4-1. 下半圆
    ct.strokeStyle="red";
    ct.lineWidth=3;
    ct.fillStyle="yellow";
    
    var x=canv.width/2;
    var y=canv.height/2
    ct.arc(x,y,100,0,Math.PI,false);
    
    ct.fill();
    ct.stroke();
    
    //4-2. 上半圆
    ct.beginPath(); //开启新的路径
    ct.strokeStyle="blue";
    ct.lineWidth=3;
    ct.fillStyle="lightblue";
    
    var x=canv.width/2;
    var y=canv.height/2
    ct.arc(x,y,100,0,Math.PI,true);
    
    ct.fill();
    ct.stroke();
    
</script>

扇形

<!--1. canvas标签，有宽度和高度-->
<canvas id="mycanvas" width="1000" height="600"></canvas>

<script type="text/javascript">
    //2. js中获取画布对象
    var canv=document.getElementById("mycanvas");
    
    //3. 上下文中设置绘图方式
    var ct=canv.getContext("2d");  //webgl就是3d效果
    
    //4. 绘制圆形的语法：
    //ct.arc(x: Number, y: Number, radius: Number, startAngle: Number, endAngle: Number, anticlockwise: Boolean)
    //x: Number, y: Number  圆心的坐标
    //radius: Number        半径的大小
    //startAngle: Number, endAngle: Number   开始的角度和结束的角度
    //anticlockwise: Boolean  是否逆时针绘制，默认false顺时针  /  true逆时针
    //2个PI就是一个正圆，表示360deg，1个PI就是一个半圆，表示180deg
    //弧度和角度的转换公式： rad = deg*Math.PI/180;   比如：90度的弧形rad=90*Math.PI/180=0.5Math.PI
    
    //4-1. 90度的弧/ 1/4圆
    ct.strokeStyle="red";
    ct.lineWidth=3;
    ct.fillStyle="yellow";
    
    var x=canv.width/2;
    var y=canv.height/2
    ct.arc(x,y,100,0,0.5*Math.PI,false);
    ct.lineTo(x,y);
    ct.lineTo(x+100,y);
    //ct.closePath();
    
    ct.fill();
    ct.stroke();
</script>