文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >自行车明星场动画

问自行车明星场动画
EN

Stack Overflow用户
提问于 2017-04-02 06:42:16
回答 4查看 213关注 0票数 1

我用javascript制作了这个星场动画。我只是不确定让它从另一边循环相同动画的最好方法。我喜欢让星星从画布的一边滚动到另一边。

​

代码语言：javascript
复制
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
stars = [];
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 500, 500);

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getSpeed(depth) {
  switch (depth / 2) {
    case 0:
      return 6;
    case 1:
      return 5;
    case 2:
      return 4;
    case 3:
      return 3;
    case 4:
      return 2;
    case 5:
      return 1;
  }
}
var i;
for (i = 0; i < 2000; i++) {
  var star = {
    x: 0,
    y: 0,
    z: 0,
    v: 0
  };
  star.x = getRandomInt(0, 500);
  star.y = getRandomInt(0, 500);
  star.z = getRandomInt(0, 5) * 2;
  star.v = getSpeed(star.z);
  stars.push(star);
}

function animation() {
  //clears background
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, 500, 500);

  // populates space with stars
  for (i = 0; i < 2000; i++) {
    ctx.fillStyle = "rgb(" + (256 / stars[i].z) + "," + (256 / stars[i].z) + "," + (256 / stars[i].z) + ")";
    ctx.fillRect(stars[i].x, stars[i].y, 2, 2);
    stars[i].x += stars[i].v;
  }

  setTimeout(animation, 33);
}
animation();
代码语言：javascript
复制
<canvas id="myCanvas"></canvas>

​

javascript
animation
canvas
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-04-02 08:00:45

当x值降到零以下时，只需重新设置它。

代码语言：javascript
复制
if (star.x < 0) star.x = canvasWidth;

比较一下，我做了一些其他的改变。

​

代码语言：javascript
复制
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function StarField(ctx, numStars, width, height) {
  var stars = new Array(numStars).fill(null).map(getStar);
  
  function getStar() {
    var z = getRandomInt(0, 5),
      c = (256 / z).toString(16);
    return {
      x: getRandomInt(0, width),
      y: getRandomInt(0, height),
      z: z * 2,
      v: 6 - z,
      c: "#" + c + c + c
    };
  }
  
  this.animate = function () {
    var i, s;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, width, height);

    for (i = 0; i < numStars; i++) {
      s = stars[i];
      ctx.fillStyle = s.c;
      ctx.fillRect(s.x, s.y, 2, 2);
      s.x -= s.v;
      if (s.x < 0) s.x = width;
    }
    setTimeout(this.animate.bind(this), 32);
  };
}

var canvas = document.getElementById("myCanvas");
var s = new StarField(canvas.getContext("2d"), 2000, 500, 500);
s.animate();
代码语言：javascript
复制
<canvas id="myCanvas"></canvas>

​

票数 2
EN

Stack Overflow用户

发布于 2017-04-02 06:58:27

倒转

代码语言：javascript
复制
stars[i].x -= stars[i].v;

您可以永远循环，当i==1999时，用-1乘v，然后再将i设置为0。

​

代码语言：javascript
复制
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
stars = [];
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 500, 500);

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getSpeed(depth) {
  switch (depth / 2) {
    case 0:
      return 6;
    case 1:
      return 5;
    case 2:
      return 4;
    case 3:
      return 3;
    case 4:
      return 2;
    case 5:
      return 1;
  }
}
var i;
for (i = 0; i < 2000; i++) {
  var star = {
    x: 0,
    y: 0,
    z: 0,
    v: 0
  };
  star.x = getRandomInt(0, 500);
  star.y = getRandomInt(0, 500);
  star.z = getRandomInt(0, 5) * 2;
  star.v = getSpeed(star.z);
  stars.push(star);
}

function animation() {
  //clears background
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, 500, 500);

  // populates space with stars
  for (i = 0; i < 2000; i++) {
    ctx.fillStyle = "rgb(" + (256 / stars[i].z) + "," + (256 / stars[i].z) + "," + (256 / stars[i].z) + ")";
    ctx.fillRect(stars[i].x, stars[i].y, 2, 2);
    stars[i].x -= stars[i].v;
  }

  setTimeout(animation, 33);
}
animation();
代码语言：javascript
复制
<canvas id="myCanvas"></canvas>

​

票数 1
EN

Stack Overflow用户

发布于 2017-04-02 07:04:56

您可以看到，通过添加新的属性d(方向)，星星可以双向运动，当星星到达屏幕的末尾时，方向会发生变化。

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"></canvas>
<script>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
stars = [];
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 500, 500);

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getSpeed( depth)
{
     switch(depth/2)
     {
       case 0:
         return 6;
       case 1:
         return 5;
       case 2:
         return 4;
       case 3:
         return 3;
       case 4:
         return 2;
       case 5:
         return 1;
     }
}
var i;
for (i = 0; i < 2000; i++) {
  var star= { x: 0, y: 0, z: 0, v: 0 };
  star.x = getRandomInt(0, 500);
  star.y = getRandomInt(0, 500);
  star.z = getRandomInt(0, 5) * 2;
  star.v = getSpeed(star.z);
  star.d = 1;
  stars.push(star);
}

function animation () {
  //clears background
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, 500, 500);

  // populates space with stars
  for (i = 0; i < 2000; i++) {
  ctx.fillStyle = "rgb(" + (256 / stars[i].z) + "," + (256 / stars[i].z) + "," + (256 / stars[i].z) + ")";
  ctx.fillRect(stars[i].x, stars[i].y, 2, 2);
  if(stars[i].x>=500)stars[i].d=-1;
  if(stars[i].x<=0)stars[i].d=1;
  stars[i].x += stars[i].v * stars[i].d;	
 }

   setTimeout(animation, 33);
}
animation ();

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

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43165377

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档