Question

我在StackOverflow上看了几篇不同的文章，但并未真正找到解决我问题的文章。下面的代码可以工作，但是一直在闪烁。

从本质上讲，我只是在创建一个星空背景，随机星星会淡入和淡出

var canvas = document.querySelector("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext("2d");

function Star(x, y, a, z, size, b) {
  this.x = x;
  this.y = y;
  this.z = z;
  this.a = a;
  this.size = size;
  this.b = b;

  this.draw = function () {
    c.fillStyle = "rgba(155, 241, 052, 1)";
    c.beginPath();
    c.arc(this.x, this.y, this.z, 0, Math.PI * 2, false);
    c.fill();
  };

  this.update = function () {
    if (this.z > this.size) {
      this.a = 0;
    }
    if (this.z < 0) {
      this.a = 1;
    }

    if (this.a == 1) {
      this.z += this.b;
    } else {
      this.z -= this.b;
    }
    this.draw();
  };
}

var starArray = [];

for (var i = 0; i < 100; i++) {
    var size = Math.random() * 3 + 2; //size range
    var x = Math.random() * innerWidth; //x coordinate
    var y = Math.random() * innerHeight; //y coordinate
    var z = Math.random() * size; //star size
    var a = 1; //on-off switch for the star to fade in or fade out
    var b = Math.random() / 20; //fade-in/fade-out rate (random for each star)
    starArray.push(new Star(x, y, a, z, size, b));
} 

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, innerWidth, innerHeight);
  for (var i = 0; i < starArray.length; i++) {
      starArray[i].update();
  }
}

animate();

Answer 1

您在arc通话中获得的半径是负值，只需执行以下操作即可：

c.arc(this.x, this.y, Math.max(this.z, 0), 0, Math.PI * 2, false);

Answer 2

您要为CanvasRenderingContext2D.arc()提供一个负半径。您可能需要重新考虑逻辑或使用Math.abs来确保提供的半径始终为非负数。

c.arc(this.x, this.y, Math.abs(this.z), 0, Math.PI * 2, false);

var canvas = document.querySelector("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext("2d");

function Star(x, y, a, z, size, b) {
  this.x = x;
  this.y = y;
  this.z = z;
  this.a = a;
  this.size = size;
  this.b = b;

  this.draw = function () {
    c.fillStyle = "rgba(155, 241, 052, 1)";
    c.beginPath();
    c.arc(this.x, this.y, Math.abs(this.z), 0, Math.PI * 2, false);
    c.fill();
  };

  this.update = function () {
    if (this.z > this.size) {
      this.a = 0;
    }
    if (this.z < 0) {
      this.a = 1;
    }

    if (this.a == 1) {
      this.z += this.b;
    } else {
      this.z -= this.b;
    }
    this.draw();
  };
}

var starArray = [];

for (var i = 0; i < 100; i++) {
    var size = Math.random() * 3 + 2; //size range
    var x = Math.random() * innerWidth; //x coordinate
    var y = Math.random() * innerHeight; //y coordinate
    var z = Math.random() * size; //star size
    var a = 1; //on-off switch for the star to fade in or fade out
    var b = Math.random() / 20; //fade-in/fade-out rate (random for each star)
    starArray.push(new Star(x, y, a, z, size, b));
} 

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, innerWidth, innerHeight);
  for (var i = 0; i < starArray.length; i++) {
      starArray[i].update();
  }
}

animate();

<canvas></canvas>

画布在不断闪烁

2 个答案: