Javascript 画布一直在闪烁

我看过一些关于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();

var canvas=document.querySelector（“canvas”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var c=canvas.getContext（“2d”）；
功能星（x、y、a、z、尺寸、b）{
这个.x=x；
这个。y=y；
这个。z=z；
这个a=a；
这个。大小=大小；
这个.b=b；
this.draw=函数（）{
c、 fillStyle=“rgba（155241052,1）”；
c、 beginPath（）；
c、 弧（this.x，this.y，this.z，0，Math.PI*2，false）；
c、 填充（）；
};
this.update=函数（）{
如果（this.z>this.size）{
这个。a=0；
}
如果（该.z<0）{
这是a=1；
}
if（this.a==1）{
这个.z+=这个.b；
}否则{
这个.z-=这个.b；
}
这个.draw（）；
};
}
var starArray=[]；
对于（变量i=0；i<100；i++）{
var size=Math.random（）*3+2；//大小范围
var x=Math.random（）*innerWidth；//x坐标
var y=Math.random（）*innerHeight；//y坐标
var z=Math.random（）*大小；//星形大小
var a=1；//星形淡入或淡出的开关
var b=Math.random（）/20；//淡入/淡出率（每颗星随机）
推（新恒星（x，y，a，z，大小，b））；
} 
函数animate（）{
请求动画帧（动画）；
c、 clearRect（0，0，innerWidth，innerHeight）；
对于（var i=0；i

您在

弧

呼叫中得到负半径，只需执行以下操作：

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

---

您提供的半径为负。您可能需要重新考虑您的逻辑或使用，以确保提供的半径始终为非负

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”）；
功能星（x、y、a、z、尺寸、b）{
这个.x=x；
这个。y=y；
这个。z=z；
这个a=a；
这个。大小=大小；
这个.b=b；
this.draw=函数（）{
c、 fillStyle=“rgba（155241052,1）”；
c、 beginPath（）；
c、 arc（this.x，this.y，Math.abs（this.z），0，Math.PI*2，false）；
c、 填充（）；
};
this.update=函数（）{
如果（this.z>this.size）{
这个。a=0；
}
如果（该.z<0）{
这是a=1；
}
if（this.a==1）{
这个.z+=这个.b；
}否则{
这个.z-=这个.b；
}
这个.draw（）；
};
}
var starArray=[]；
对于（变量i=0；i<100；i++）{
var size=Math.random（）*3+2；//大小范围
var x=Math.random（）*innerWidth；//x坐标
var y=Math.random（）*innerHeight；//y坐标
var z=Math.random（）*大小；//星形大小
var a=1；//星形淡入或淡出的开关
var b=Math.random（）/20；//淡入/淡出率（每颗星随机）
推（新恒星（x，y，a，z，大小，b））；
} 
函数animate（）{
请求动画帧（动画）；
c、 clearRect（0，0，innerWidth，innerHeight）；
对于（var i=0；i
效果很好！！非常感谢。我想我以为我保持了z（半径）正，但我想我没有。@jrob11没问题。可以。只要等几分钟，我就可以接受：）很好的回应。我不敢相信它是如此之小以至于我没有意识到。我建议你检查一下你的浏览器控制台。它“闪烁”的真正原因是，由于函数调用，它抛出了很多错误，它们都显示在控制台中。