Question

我想从右到左编写一个简单的滚动starfield。我随机打印出星星。现在，我如何定位每颗恒星并随机给它一个速度（比如1-10）并开始移动它？我还需要在每个星星到达左边缘后将其放回右边缘。

以下是我目前编写的代码：

<!DOCTYPE html>
<html>
<head>
<script>


 function stars()
 {
    canvas = document.getElementById("can");

    if(canvas.getContext)
    {
       ctx = canvas.getContext("2d");
       ctx.fillStyle = "black";
       ctx.rect (0, 0, 400, 400);
       ctx.fill();
       starfield();
    }
  }
  //print  random stars
  function starfield()
  {
     for (i=0; i<10; i++)
     {
        var x = Math.floor(Math.random()*399);
        var y = Math.floor(Math.random()*399);
        var tempx = x;
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
     }
  }

</script>

</head>
<body onload="stars()">
<h1>Stars</h1>
<canvas id="can" width="400" height="400"style="border:2px solid #000100" ></canvas>
</body >
</html>

Answer 1

将x,y坐标放在数组中，然后创建一个绘制数组的函数。

var stars = [
  {x:110, y:80},
  {x:120, y:20},
  {x:130, y:60},
  {x:140, y:40}
]

然后在使用绘制函数之前每次都创建一个函数来改变x,y坐标（例如增量y=y+1）。

<强>加成：此阵列解决方案允许您让每个星星以自己的速度移动，您可以在该阵列中存储增量（例如1到3），然后执行y=y+delta。这看起来像3D。你甚至可以走得更远，有一个单独的x和y三角洲，并且有中间的星星飞出来，这更加3D！

甚至更简单/更快可能是让渲染函数接受x，y偏移。然后它甚至可以环绕，这样一边从屏幕上掉下来的东西就会回到另一边。看起来你在空间旋转。

Answer 2

这是Codepen上的quick demo。将星星保存在数组中后，我使用requestAnimationFrame运行绘图代码并更新每一帧的位置。

function stars() {
  canvas = document.getElementById("can");
  console.log(canvas);
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    ctx.fillStyle = "black";
    ctx.rect(0, 0, 400, 400);
    ctx.fill();
    starfield();
  }
}
// Create random stars with random velocity.
var starList = []
function starfield() {
  for (i = 0; i < 20; i++) {
    var star = {
      x: Math.floor(Math.random() * 399),
      y: Math.floor(Math.random() * 399),
      vx: Math.ceil(Math.random() * 10)
    };
    starList.push(star);
  }
}

function run() {
  // Register for the next frame
  window.requestAnimationFrame(run);

  // Reset the canvas
  ctx.fillStyle = "black";
  ctx.rect(0, 0, 400, 400);
  ctx.fill();

  // Update position and draw each star.
  var star;
  for(var i=0, j=starList.length; i<j; i++) {
    star = starList[i];
    star.x = (star.x - star.vx + 400) % 400;
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(star.x, star.y, 3, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
  }
}

stars();
run();

Answer 3

我模仿星体向一个点（如中心）移动的简单方法就是将X和Y分成Z坐标。

nx = x / z ny = y / z

在迭代时简单地减小z值。由于z很大，你的点数将在一个点附近，随着z的减小，结果会越来越大，模仿“移动”的恒星。

Answer 4

只提供使用 jQuery 的解决方案，因为使用它可以获得与完整画布解决方案相比较少行代码的输出。它使用两个canvas div来获得所需的输出：

Check this fiddle

问题中发布的代码中的更新代码很少

<script>
 function stars(){
     canvas = document.getElementById("can1");
     canvasCopy = document.getElementById("can2");

 if(canvas.getContext){
         ctx = canvas.getContext("2d");
         ctx.fillStyle = "black";
         ctx.rect (0, 0, 400, 400);
         ctx.fill();
         starfield();
         var destCtx = canvasCopy.getContext('2d');
         destCtx.drawImage(canvas, 0, 0);
     }
 }
//print  random stars
function starfield(){
    for (i=0;i<10;i++){
        var x = Math.floor(Math.random()*399);
        var y = Math.floor(Math.random()*399);
        var tempx = x;
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    }
}
</script>

<body onload="stars()">
<h1>Stars</h1>
    <div id="starBlocks">
    <canvas id="can1" width="400" height="400"style="border:2px solid #000100" ></canvas>
    <canvas id="can2" width="400" height="400"style="border:2px solid #000100" ></canvas>
    </div>
</body >

<强>的jQuery

function playStars()
{
    $('#starBlocks').animate({
        scrollLeft : 400
    },10000,'linear',function(){
        $('#starBlocks').scrollLeft(0);
        playStars();
    });
}
playStars();

<强> CSS

#starBlocks{
    white-space:nowrap;
    font-size:0px;
    width:400px;
    overflow:hidden;
}

如何制作滚动星空

4 个答案:

Check this fiddle