canvas三角函数做椭圆运动效果

Posted 2020-08-21

<canvas id="canvas" width="800" height="400" style="background-color: #000;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var centerX=canvas.width/2;
var centerY=canvas.height/2;
var radiusX=200;
var radiusY=50;
function bg(){
cxt.clearRect(0,0,canvas.width,canvas.height)
for(var i=0;i<Math.PI*2;i+=0.1)
{
cxt.beginPath();
cxt.arc(Math.cos(i)*radiusX+centerX,Math.sin(i)*radiusY+centerY,2,0,Math.PI*2,true);
cxt.fillStyle="#fff";
cxt.fill();
cxt.closePath();
}
}
var ra=0;
function radiu(){
cxt.clearRect(0,0,canvas.width,canvas.height);
bg()
cxt.beginPath();
cxt.fillStyle="#fff";
cxt.arc(Math.cos(ra)*radiusX+centerX,Math.sin(ra)*radiusY+centerY,10,0,Math.PI*2,true)
cxt.fill();
cxt.closePath();
ra+=0.01;
requestAnimationFrame(radiu)
}
radiu()
</script>