如何使画布圆圈像地球围绕太阳旋转？答案

【问题标题】：How to make a canvas circle to rotate as the Earth around the Sun?如何使画布圆圈像地球围绕太阳旋转？
【发布时间】：2018-03-24 10:35:59
【问题描述】：

大家！我有一个挑战。我需要在 Canvas 上绘制一个迷你太阳系。在这个系统中，有 3 个圆（月球、太阳和地球）。根据任务，月球必须围绕地球转，地球也必须围绕太阳转。

这些是旋转函数：

var drawSun = function(centerX, centerY, radius){
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;
    radius = 150;
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.lineWidth = 5;
    context.strokeStyle = 'yellow';
    context.stroke();
}

var drawEarth = function(){
    var circle = {centerX:canvas.width/4, centerY:canvas.height/4, radius:50, angle:0}
    var earth = {x:0, y:0,speed:1};
    earth.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
    earth.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
    circle.angle += earth.speed;
    context.lineWidth = 5;
    context.strokeStyle = 'blue';
    context.stroke();
    context.beginPath();
    context.arc(earth.x, earth.y, 15,0, Math.PI*2, true);
    context.closePath();
}

var drawMoon = function(){
    var circle = {centerX:canvas.width / 4, centerY:canvas.height / 4, radius:5, angle:0}
    var moon= {x:0, y:0,speed:1};
    moon.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
    moon.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
    circle.angle += moon.speed;
    context.lineWidth = 5;
    context.strokeStyle = 'white';
    context.stroke();
    context.beginPath();
    context.arc(moon.x, moon.y, 15,0, Math.PI*2, true);
    context.closePath();
}

var drawPlanets = function(){
    drawSun();
    drawEarth();
    drawMoon();
}

但是，说实话，行星根本不动。它们只是存在（但只有太阳和月亮），它们的位置是静态的。

我的错误在哪里？

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: black;
			}
			
			canvas {
				position: absolute;
				margin: auto;
				left: 0;
				right: 0;
				border: solid 1px white;
				border-radius: 10px
			}
		</style>
	</head>
	
	<body>
		<canvas id="canvas"></canvas>
		<script type="application/javascript">
			
			void function() {
			
				"use strict";
				
				const _2PI = 2.0 * Math.PI;
				
				class Planet {
					constructor(x,y,radius,colour,parent,orbitDistance,orbitSpeed) {
						this.x = 0;
						this.y = 0;
						this.originX = x;
						this.originY = y;
						this.radius = radius;
						this.colour = colour;
						this.parent = parent || null;
						this.orbitDistance = parent ? orbitDistance : 0;
						this.orbitSpeed = parent ? orbitSpeed : 0;
						this.orbitAngle = 0.0;
					}
					
					tick() {
						this.orbitAngle += this.orbitSpeed;
						if (this.orbitAngle > _2PI) {
							this.orbitAngle = 0.0;
						}
						
						this.x = (this.parent ? this.parent.x : this.originX) + Math.cos(this.orbitAngle) * this.orbitDistance;
						this.y = (this.parent ? this.parent.y : this.originY) + Math.sin(this.orbitAngle) * this.orbitDistance;
					}
					
					render(ctx) {
						ctx.strokeStyle = "black";
						ctx.fillStyle = this.colour;
						ctx.beginPath();
						ctx.arc(this.x,this.y,this.radius,0.0,_2PI,false);
						ctx.fill();
						ctx.stroke();
						ctx.closePath();
					}
				}
				
				let canvasWidth = 180;
				let canvasHeight = 160;
				let canvas = null;
				let ctx = null;
				let sun = null;
				let earth = null;
				let moon = null;
				
				function loop() {
					
					// Update orbits
					sun.tick();
					earth.tick();
					moon.tick();
					
					// Clear canvas
					ctx.fillStyle = "#444444";
					ctx.fillRect(0,0,canvasWidth,canvasHeight);
					
					// Render planets
					sun.render(ctx);
					earth.render(ctx);
					moon.render(ctx);
					
					// Keeps the loop running at 60 fps
					requestAnimationFrame(loop);
				}
				
				window.onload = function() {
					canvas = document.getElementById("canvas");
					canvas.width = canvasWidth;
					canvas.height = canvasHeight;
					ctx = canvas.getContext("2d");
					
					sun = new Planet(90,80,10,"orange");
					earth = new Planet(0,0,5,"blue",sun,60,0.0125);
					moon = new Planet(0,0,3,"#777777",earth,10,0.025);
					
					loop();
				}
			
			}();
			
		</script>
	</body>
</html>

【讨论】：