canvas绘图详解-02-绘制弧和圆

通过画下面这个来解析一下画弧和圆的基本函数

canvas绘图详解-02-绘制弧和圆

一、画弧和圆的函数

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x,y是圆的圆心坐标，r是圆心的半径，sAngle是起始角，以弧度计，也就是画得圆的开始。eAngle是结束角，也就是画圆的结束。counterclockwise时顺时针画还是逆时针画。

（弧的圆形的三点钟位置是 0 度）

canvas绘图详解-02-绘制弧和圆

下面这个代码就是画出上面那些弧和圆的例子

<!DOCTYPE html>
<html>
<head>
    <title>画圆</title>
</head>
<body>
<canvas >
    当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">
    window.onload=function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');
        /*//顺时针
        context.lineWidth = 5;
        context.strokeStyle = "#005588";
        context.arc(300,300,200,0,1.5*Math.PI,true);
        context.stroke();
        //逆时针
        context.lineWidth = 5;
        context.strokeStyle = "#005588";
        context.arc(300,300,200,0,1.5*Math.PI);
        context.stroke();*/
        context.lineWidth = 5;
        context.strokeStyle = "#005588";
        //首尾相连
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,60,40,0,2*Math.PI*(i+1)/10);
            context.closePath();

            context.stroke();
        }
        //首尾不相连 closepath封闭路径
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,180,40,0,2*Math.PI*(i+1)/10);

            context.stroke();
        }
        //首尾相连 逆时针
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
            context.closePath();

            context.stroke();
        }
        //首尾不相连 逆时针
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,420,40,0,2*Math.PI*(i+1)/10,true);

            context.stroke();
        }
        context.fillStyle = "#005588";
        //首尾相连 顺时针 有closePath填充
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,540,40,0,2*Math.PI*(i+1)/10);
            context.closePath();

            context.fill();
        }
        //首尾相连 顺时针 无closePath填充 fill有无closePath都行
        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(100+i*100,660,40,0,2*Math.PI*(i+1)/10);

            context.fill();
            
        }

    }
</script>
</body>
</html>

注意：

closepath封闭路径，顺时针和逆时针画出来的不一样。

canvas绘图详解-02-绘制弧和圆

相关推荐