提问者:小点点

画布不停地闪烁


我看了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();

共2个答案

匿名用户

arc调用的半径为负值,只需执行以下操作:

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

匿名用户

您正在向CanVasRenderingContext2d.arc()提供负半径。 您可能需要重新考虑您的逻辑,或者使用Math.abs来确保提供的半径始终是非负的。

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

null

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>