Question

我正在尝试创建星空的画布动画。它具有固定的速度值，因此恒星以相同的速度移动，但是现在我想以恒星不移动的方式启动它，当您单击按钮时，我要缓慢启动它，然后逐渐提高速度，然后再次减速并停止。我该如何实现？

速度应类似于此示例 https://www.shadertoy.com/view/Xdl3D2

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <canvas id="c" width="900px" height="700px"></canvas>
    
    <script type="text/javascript">
    const canvas = document.getElementById('c');
    const c = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    window.addEventListener('wheel', (event) => {
      if (event.deltaY < 0) speed *= 1.1;
      else speed *= 0.9;
      if (speed < 0.01) speed = 0.01;
      else if (speed > 0.1) speed = 0.1;
    });
    class Star {
      constructor() {
        this.x = Math.random()*canvas.width-canvas.width/2;
        this.y = Math.random()*canvas.height-canvas.height/2;
        this.px, this.py;
        this.z = Math.random()*4;
      }
      update() {
        this.px = this.x;
        this.py = this.y;
        this.z += speed;
        this.x += this.x*(speed*0.2)*this.z;
        this.y += this.y*(speed*0.2)*this.z;
        if (this.x > canvas.width/2+50 || this.x < -canvas.width/2-50 ||
            this.y > canvas.height/2+50 || this.y < -canvas.height/2-50) {
          this.x = Math.random()*canvas.width-canvas.width/2;
          this.y = Math.random()*canvas.height-canvas.height/2;
          this.px = this.x;
          this.py = this.y;
          this.z = 0;
        }
      }
      show() {
        c.lineWidth = this.z;
        c.beginPath();
        c.moveTo(this.x, this.y);
        c.lineTo(this.px, this.py);
        c.stroke();
      }
    }
    let speed = 0.09;
    let stars = [];
    for (let i = 0; i < 1000; i++) stars.push(new Star());
    c.fillStyle = 'rgba(0, 0, 0, 0.4)';
    c.strokeStyle = 'rgb(255, 255, 255, 0.5)';
    c.translate(canvas.width/2, canvas.height/2);
    function draw() {
      requestAnimationFrame(draw);
      c.fillRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
      for (let s of stars) {
        s.update();
        s.show();
      }
    }
    draw();
    </script>
    <style type="text/css">
    body {
        padding: 0;
        margin: 0;
    }
    
    canvas {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    </style>
    </body>
    </html>

Answer 1

您必须提高function draw中的速度才能创建加速效果，并降低到减速速度。

const canvas = document.getElementById('c');
const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Star {
  constructor() {
    this.x = Math.random() * canvas.width - canvas.width / 2;
    this.y = Math.random() * canvas.height - canvas.height / 2;
    this.px, this.py;
    this.z = Math.random() * 4;
  }
  update() {
    this.px = this.x;
    this.py = this.y;
    this.z += speed;
    this.x += this.x * (speed * 0.2) * this.z;
    this.y += this.y * (speed * 0.2) * this.z;
    if (this.x > canvas.width / 2 + 50 || this.x < -canvas.width / 2 - 50 ||
      this.y > canvas.height / 2 + 50 || this.y < -canvas.height / 2 - 50) {
      this.x = Math.random() * canvas.width - canvas.width / 2;
      this.y = Math.random() * canvas.height - canvas.height / 2;
      this.px = this.x;
      this.py = this.y;
      this.z = 0;
    }
  }
  show() {
    c.lineWidth = this.z;
    c.beginPath();
    c.moveTo(this.x, this.y);
    c.lineTo(this.px, this.py);
    c.stroke();
  }
}

let speed = 0.005;
let speed_inc = 0.0002;
let stars = [];
for (let i = 0; i < 1000; i++) stars.push(new Star());
c.fillStyle = 'rgba(0, 0, 0, 0.4)';
c.strokeStyle = 'rgb(255, 255, 255, 1)';
c.translate(canvas.width / 2, canvas.height / 2);

function draw() {
  requestAnimationFrame(draw);
  c.fillRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
  for (let s of stars) {
    s.update();
    s.show();
  }
  if (speed >= 0.005) {
    speed += speed_inc
    if (speed > 0.1) 
      speed_inc = -0.0004;
  }
}
draw();

body {
  padding: 0;
  margin: 0;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

<canvas id="c" width="900px" height="700px"></canvas>

加快Starfield Canvas动画的速度并对其进行控制

1 个答案: