canvas（一）画弧线和扇形 

<html>

    <head>
        <title></title>
    </head>

    <body>
        <canvas id="cvs" width="500" height="500"></canvas>
    </body>

</html>
<script type="text/javascript">
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    //      画弧
    //  ctx.arc( 圆心x轴坐标，圆心y轴坐标，半径, 起点弧度，结束点弧度，是否逆时针画(可选) )
    //   角度需要转化成弧度公式
    function angleToRadian(angle) {
        return Math.PI / 180 * angle;
    }
    //    顺时针画一半圆弧
    ctx.arc(100, 100, 50, angleToRadian(-90), angleToRadian(90))
    ctx.strokeStyle = 'deepskyblue'
    ctx.stroke()

    //    画扇形和弧的区别: 首先要移动到圆点，结束时要闭合路径
    ctx.beginPath();
    ctx.moveTo(200, 200)
    ctx.arc(200, 200, 50, angleToRadian(-90), angleToRadian(90));
    ctx.strokeStyle = 'deepskyblue';
    ctx.closePath();
    ctx.stroke();
</script>

 

posted @ 2017-08-15 17:16  坑坑如也  阅读(1727)  评论(0)  编辑  收藏  举报