<!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>
