canvas绘制星球轨道

来源：互联网发布：淘宝花呗怎么还款编辑：程序博客网时间：2024/05/15 17:12

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<canvas width="900" height="900" style="border: 1px solid red;"></canvas>
<script>
// 1.获取canvas对象
var canvas = document.querySelector('canvas');

// 2.获取绘图环境
var ctx = canvas.getContext('2d');

// 坐标原点移动到中间
ctx.translate(canvas.width / 2, canvas.height / 2);

var deg = 0;
setInterval(function() {
deg += 0.1;
// 1.清空画布
ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);

// 2.绘制黑色背景
ctx.fillRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);

/*
轨道：8条轨道
星球：8大星球+1个太阳

星球围绕太阳旋转
*/
// 3.轨道
for (var i = 1; i <= 8; i++) {
ctx.beginPath();
ctx.arc(0, 0, 50 * i, 0, Math.PI * 2, false);
ctx.strokeStyle = '#fff';
ctx.stroke();
}

// 4.太阳
Star(0, 0, 0, 20, '#F00', '#F90');

// 5.水星
Star(87.7, 0, -50, 10, '#A69697', '#5C3E40');

// 6.金星
Star(224.701, 0, -100, 10, '#C4BBAC', '#1F1315');

// 7.地球
Star(365.224, 0, -150, 10, '#78B1E8', '#050C12');

// 8.火星
Star(686.98, 0, -200, 10, '#78B1E8', '#050C12');

// 9木星
Star(4332.589, 0, -250, 10, '#78B1E8', '#050C12');

// 10.土星
Star(10759.5, 0, -300, 10, '#78B1E8', '#050C12');

// 11.天王星
Star(30799.095, 0, -350, 10, '#78B1E8', '#050C12');

// 12.海王星
Star(60152, 0, -400, 10, '#78B1E8', '#050C12');
}, 100);

function Star(time, x, y, r, startColor, endColor) {
// 6.绘制金星（224.701）
ctx.save();
ctx.beginPath();
ctx.rotate(100 * deg / time);
ctx.arc(x, y, r, 0, Math.PI * 2, false);

var color = ctx.createRadialGradient(x, y, 0, x, y, r);
color.addColorStop(0, startColor);
color.addColorStop(1, endColor);
ctx.fillStyle = color;

ctx.fill();
ctx.restore();
}
</script>
</body>

</html>

0 0