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>

试图看看我是否可以动画星星的动画

1 个答案: