canvas动画---- 太阳、地球、月球

<div>
    <canvas id="canvas" width="500" height="500"></canvas>
</div>

function draw(){
        var canvas = document.getElementById("canvas");
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle="black";
        ctx.fillRect(10,10,580,580);
        ctx.save();
        
        //绘制太阳
        ctx.translate(250,250);
        ctx.beginPath();
        ctx.fillStyle="red";
        ctx.arc(0,0,50,0,2*Math.PI);
        ctx.fill();
        
        //绘制地球轨道
        ctx.beginPath();
        ctx.strokeStyle="yellow";
        ctx.arc(0,0,120,0,2*Math.PI);
        ctx.stroke();
        
        let time = new Date();
        //绘制地球
        ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds());
        ctx.translate(120,0);
        ctx.beginPath();
        ctx.fillStyle="blue";
        ctx.arc(0,0,10,0,2*Math.PI);
        ctx.fill();
        
        //绘制月球轨道
        ctx.beginPath();
        ctx.strokeStyle="gray";
        ctx.arc(0,0,30,0,2*Math.PI);
        ctx.stroke();
        
        //绘制月球
        ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
        ctx.translate(30,0);
        ctx.beginPath();
        ctx.fillStyle="lightblue";
        ctx.arc(0,0,5,0,2*Math.PI);
        ctx.fill();
        
        ctx.restore();
        requestAnimationFrame(draw);//告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画,该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
    }
    draw();

截图：

标签：动画,canvas,beginPath,ctx,arc,月球,PI,Math
来源： https://www.cnblogs.com/zhanglw456/p/10338309.html