我制造太阳系。为什么我的轨道没有显示在页面上?我尝试更改画布的大小,更改CSS的大小,但没有任何反应。如果仅更改半径值,则或多或少看起来不错。
JavaScript:
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init() {
sun.src = 'sun.png';
moon.src = 'moon.png';
earth.src = 'earth.png';
setInterval(draw, 100);
}
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0, 0, 800, 800); // 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.beginPath();
ctx.arc(150, 150, 150, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 150, 210, 0, Math.PI * 2, false);
ctx.stroke();
ctx.drawImage(sun, 0, 0, 300, 300);
}
init();
HTML:
<canvas id="canvas" width="1200" height="1200">
<script src="script.js"></script>
</canvas>