试着看看我是否可以使星星动起来

Question

我一直在努力使星星动起来，但是我不确定如何。 我尝试使用多种不同的技术，但最后仍然无法正常工作。 如果您将恒星移动得太多，我只是希望它们移动就没有关系。 任何帮助，将不胜感激谢谢。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(0, 102, 204)";
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.linewidth = 3;

//making the background

ctx.fillRect(0, 0, 1000, 900);

//making the grass
ctx.fillStyle = "rgb(178, 255, 102)";

ctx.fillRect(0, 620, 1000, 280);

// draw the stars
ctx.fillStyle = "rgb(255, 255, 153)";
ctx.beginPath();
ctx.moveTo(80, 120);
ctx.lineTo(100, 100);
ctx.lineTo(80, 80);
ctx.lineTo(60, 100);
ctx.lineTo(80, 120);
ctx.fill();

 ctx.beginPath(); //star 2
ctx.moveTo(120, 220);
ctx.lineTo(140, 200);
ctx.lineTo(120, 180);
ctx.lineTo(100, 200);
ctx.lineTo(120, 220);
ctx.fill();

ctx.beginPath();// star 3
ctx.moveTo(60, 160);
ctx.lineTo(180, 40);
ctx.lineTo(160, 20);
ctx.lineTo(140, 40);
ctx.lineTo(160, 60);
ctx.fill();

ctx.beginPath();//star 4
ctx.moveTo(240, 140);
ctx.lineTo(260, 120);
ctx.lineTo(240, 100);
ctx.lineTo(220, 120);
ctx.lineTo(240, 140);
ctx.fill();

ctx.beginPath();//star 5
ctx.moveTo(300, 260);
ctx.lineTo(320, 240);
ctx.lineTo(300, 220);
 ctx.lineTo(280, 240);
ctx.lineTo(300, 260);
ctx.fill();

ctx.beginPath();//star 6
ctx.moveTo(380, 180);
ctx.lineTo(400, 160);
ctx.lineTo(380, 140);
ctx.lineTo(360, 160);
ctx.lineTo(380, 180);
ctx.fill();

ctx.beginPath();//star 7
ctx.moveTo(460, 80);
ctx.lineTo(480, 60);
ctx.lineTo(460, 40);
ctx.lineTo(440, 60);
ctx.lineTo(460, 80);
 ctx.fill();

 ctx.beginPath();//star 8 
 ctx.moveTo(520, 160);
 ctx.lineTo(540, 140);
 ctx.lineTo(520, 120);
 ctx.lineTo(500, 140);
 ctx.lineTo(520, 160);
 ctx.fill();


 ctx.beginPath();//star 9
ctx.moveTo(620, 60);
ctx.lineTo(640, 40);
ctx.lineTo(620, 20);
ctx.lineTo(600, 40);
ctx.lineTo(620, 60);
ctx.fill();


ctx.beginPath();//star 10
ctx.moveTo(660, 180);
ctx.lineTo(680, 160);
ctx.lineTo(660, 140);
ctx.lineTo(640, 160);
ctx.lineTo(660, 180);
ctx.fill();


ctx.beginPath();//star 11 
ctx.moveTo(600, 240);
ctx.lineTo(620, 220);
ctx.lineTo(600, 200);
ctx.lineTo(580, 220);
ctx.lineTo(600, 240);
ctx.fill();


ctx.beginPath();//star 12 
ctx.moveTo(740, 80);
ctx.lineTo(760, 60);
ctx.lineTo(740, 40);
ctx.lineTo(720, 60);
ctx.lineTo(740, 80);
ctx.fill();


ctx.beginPath();//star 13 
ctx.moveTo(820, 160);
ctx.lineTo(840, 140);
ctx.lineTo(820, 120);
ctx.lineTo(800, 140);
ctx.lineTo(820, 160);
ctx.fill();


</script>
</body>
</html>

Answer 1

看看window.requestAnimationFrame 。

 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var i = 0; var speed = 500; var drawStar = function (x, y) { ctx.beginPath(); ctx.moveTo(80 + x, 120 + y); ctx.lineTo(100 + x, 100 + y); ctx.lineTo(80 + x, 80 + y); ctx.lineTo(60 + x, 100 + y); ctx.closePath(); ctx.fill(); }; var render = function () { i += 1; var offset = i % speed; // calculate how much the stars moved ctx.fillStyle = "rgb(0, 102, 204)"; //making the background ctx.fillRect(0, 0, 400, 300); //making the grass ctx.fillStyle = "rgb(178, 255, 102)"; ctx.fillRect(0, 200, 400, 100); // draw the stars ctx.fillStyle = "rgb(255, 255, 153)"; drawStar(offset, 0); drawStar(offset + 100, 50); drawStar(offset + 160, 20); window.requestAnimationFrame(render); // call render again in about 33ms }; render(); // call render for the first time 

 <canvas id="myCanvas" width="400" height="300"></canvas>