使用canvas画以12点钟为0度的反向圆

本文链接：https://blog.youkuaiyun.com/huhudeni/article/details/89154143

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    canvas.width = 1000;
    canvas.height = 1000;
    let degrees  =0;//角度 下面会把角度与弧度进行转换





    function updata(){
           //大与360 角度置0
        if(degrees>=360)
            degrees=0;
            //清除画布
        context.clearRect(0,0,1000,1000);
        degrees ++;

        // console.log(degrees);
        context.save()//保存
        context.beginPath();
        context.translate(50,100);//移动动画布
        context.rotate(-90* Math.PI / 180)//旋转画布-90度   这个度数是可以变化的 0度是三点钟方向  -90是12点钟的方向
        context.strokeStyle='red';

        context.arc(50,100,50,0,-degrees *Math.PI/180,false);//画圆  这里的-degrees决定的反向    正的就是正方向
        context.translate(-50,-100);//归位
        context.stroke();
        context.restore();//恢复


        //下面是测试canvas是不是会影响后面的相关操作 --无用
        context.rect(20,20,150,100);
        context.stroke();

        window.requestAnimationFrame(this.updata.bind(this));

    }

    updata();
</script>

</body>
</html>