私は星を動かすことができるかどうか確認しようとしています

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>