<canvas style="border: red solid 3px;" id=‘canvas‘ width=‘500‘ height=‘500‘></canvas>
<script>
var canvas = document.getElementById(‘canvas‘),
context = canvas.getContext(‘2d‘),
WIDTH = canvas.width,
HEIGHT = canvas.height,
PI = Math.PI,
P0 = 0,
P1 = 0,
Z0 = 9;
Z1 = 3;
function main(){
context.clearRect(0,0,WIDTH,HEIGHT);//清空画布
context.beginPath();//开始绘制一条路径
context.arc(
Math.cos(P0+=0.01*PI/2).toFixed(4)*WIDTH/Z1+WIDTH/2,
Math.sin(P1+=0.01*PI/2).toFixed(4)*HEIGHT/Z0+HEIGHT/2,
10,
0.0*PI,
2.0*PI
);//arc(圆的x坐标,圆的y坐标,圆的半径,起始角,结束角)
context.fill();
}
setInterval(main,5);
</script>
原文:https://www.cnblogs.com/tongyuzhe/p/10432892.html