canvas画布 sun earth moon转动

原创 阿晴天 随笔 canvas 383阅读 2017-11-09 00:15:20 举报

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sun</title>
<style>
canvas{
background-color: black;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>
</html>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d"),time=0;
function draw(){
ctx.clearRect(0, 0, 500,500);
ctx.beginPath();
ctx.fillStyle="white";
ctx.arc(250, 250,200,0,Math.PI*2);//地球轨道
ctx.closePath();
ctx.stroke();

    ctx.beginPath();
    ctx.arc(250,250, 40, 0,Math.PI*2);//太阳
    ctx.closePath();
    var suncolor=ctx.createLinearGradient(210,0, 290,0);
    suncolor.addColorStop(0, "red");
    suncolor.addColorStop(1, "gold");
    ctx.fillStyle=suncolor;
    ctx.fill();

    ctx.save();
    ctx.translate(250, 250);
    ctx.rotate(time*365/360*Math.PI/180);
    ctx.beginPath();
    ctx.arc(200,0, 20, 0,Math.PI*2);//地球
    ctx.closePath();
    var earthcolor=ctx.createLinearGradient(180,0, 240,0);
    earthcolor.addColorStop(0, "blue");
    earthcolor.addColorStop(1, "gray");
    ctx.fillStyle=earthcolor;
    ctx.fill();

    ctx.save();
    ctx.translate(200, 0);
    ctx.rotate(time*365*Math.PI/180);
    ctx.beginPath();
    ctx.arc(0, 0, 50, 0,Math.PI*2);//月球轨道
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(40, 0,10, 0,Math.PI*2);//月球
    var mooncolor=ctx.createLinearGradient(30,0, 50,0);
    mooncolor.addColorStop(0, "gray");
    mooncolor.addColorStop(1, "white");
    ctx.fillStyle=mooncolor;
    ctx.fill();
    ctx.restore();
    ctx.restore();
    ctx.restore();
    time++;

}
draw();
setInterval(draw, 50);

</script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复