<!DOCTYPE html><html><head> <title>银河系</title> <meta charset="utf-8"> </head><body> <canvas id="c" width="500" height="500"></canvas> <script type="text/javascript"> var sun = new Image(); var moon = new Image(); var earth = new Image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; window.requestAnimationFrame(draw); } function draw() { var ctx = document.getElementById('c').getContext('2d'); ctx.clearRect(0, 0, 300, 300); // clear canvas ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); var time = new Date(); ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds()); ctx.translate(105, 0); ctx.fillRect(0, -12, 50, 24); // Shadow ctx.drawImage(earth, -12, -12); ctx.save(); ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds()); ctx.translate(0, 28.5); ctx.drawImage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginPath(); ctx.arc(150, 150, 105, 0, Math.PI * 2, false); ctx.stroke(); ctx.drawImage(sun, 0, 0, 300, 300); window.requestAnimationFrame(draw); } init(); </script></body></html>解决方案
因为你最后画了太阳的img，使得地球和月球被覆盖了。只需要在清除canvas内容后直接绘制太阳的img即可。