shadowBlur（html canvas）在js循环中不起作用

Question

我正在尝试使用JS创建的天空动画中改善星星。这是当我发现时，可以使用shadowBlur属性更改在星星周围创建的阴影的大小，以使其看起来像闪烁一样。现在的问题是shadowBlur上升了，但是没有变回黑色。这是我使用的代码。任何帮助，将不胜感激:)。

祝您有美好的一天！

// ---- Vars for star animation
let randomStars     = [];
let starCollection  = [];
let numberofStars   = 50;
let flickeringStars = 50;

class Star{
    constructor(x,y,color,radius,shadowBlur){
        this._canvas        = document.querySelector('canvas');
        this._canvas.width  = window.innerWidth;
        this._canvas.height = window.innerHeight; 
        this._c             = this._canvas.getContext('2d');
        this._radius        = radius;

        this._x             = x;
        this._y             = y;
        this._color         = color;  

        this._shadowBlur    = 10;
        this._shadowColor   = 'white';
    }
    //drawing individual stars
    draw(){
        this._c.beginPath();
        this._c.arc(this._x,this._y,this._radius,0,Math.PI * 2,false);
        this._c.fillStyle   = this._color;
        this._c.strokeStyle = 'black';
        this._c.shadowColor = this._shadowColor;
        this._c.shadowBlur  = this._shadowBlur;
        this._c.stroke();
        this._c.fill();
        this._c.closePath();
    }

 
    //Fade in and out for stars
    flicker(){
        setTimeout(()=>{this._shadowBlur=10;},200);
        setTimeout(()=>{this._shadowBlur=8;},400);
        setTimeout(()=>{this._shadowBlur=6;},600);
        setTimeout(()=>{this._shadowBlur=4;},800);
        setTimeout(()=>{this._shadowBlur=2;},1000);

        setTimeout(()=>{this._shadowBlur=0;},1200);
        setTimeout(()=>{this._shadowBlur=2;},1400);
        setTimeout(()=>{this._shadowBlur=4;},1600);
        setTimeout(()=>{this._shadowBlur=6;},1800);
        setTimeout(()=>{this._shadowBlur=8;},2000);
        setTimeout(()=>{this._shadowBlur=10;},2200);

        setTimeout(()=>{this.draw();},200);
        setTimeout(()=>{this.draw();},400);
        setTimeout(()=>{this.draw();},600);
        setTimeout(()=>{this.draw();},800);
        setTimeout(()=>{this.draw();},1000);
        setTimeout(()=>{this.draw();},1200);
        setTimeout(()=>{this.draw();},1400);

        setTimeout(()=>{this.draw();},1600);
        setTimeout(()=>{this.draw();},1800);
        setTimeout(()=>{this.draw();},2000);
        setTimeout(()=>{this.draw();},2200);
    }

    //Clears the canvas
    clearstars(){
        this._c.clearRect(0,0,window.innerWidth, window.innerHeight);
    }

}


// ---- Functions ----

//Typing animation
const typingAnimation       = ()=>{
        if(textProgress < text.length){
            setTimeout(()=>{requestAnimationFrame(typingAnimation)}, speed);
            if(text.charAt(textProgress) === '\n')document.getElementById('animation-text').innerHTML += '</br>';
            document.getElementById('animation-text').innerHTML += text.charAt(textProgress);
            textProgress ++;
        }else{
            let event      = new CustomEvent('showStars');
            dispatchEvent(event);
        }
}
//Store stars
const storeStars            = ()=>{
    starCollection = [];
    
    for(let i=0;i<numberofStars;i++){
        let x           = Math.floor(Math.random()*window.innerWidth);
        let y           = Math.floor(Math.random()*window.innerHeight);
        starCollection.push(new Star(x,y,"white",(Math.random()+1)-0.7));
    }
}
//Show stars to the screen
const showStars             = ()=>{
    for(let i=0;i<starCollection.length;i++){
        starCollection[i].draw();
    }
}
//Store random stars
const generateRandomStars   = ()=>{
    randomStars = [];

    for(let i=0;i<flickeringStars;i++){
        let x           = Math.floor(Math.random()*window.innerWidth);
        let y           = Math.floor(Math.random()*window.innerHeight);
        randomStars.push(new Star(x,y,"white",(Math.random()+1)-0.7));
    }
}
//Show randoms stars after clearing previous set of flickering stars
const showRandomStars       = ()=>{
    let id = window.setTimeout(function () { }, 0);
    while (id--) {
        window.clearTimeout(id); 
    }

    let starHandler = new Star(0,0,"white",0);
    starHandler.clearstars();
                    
    showStars();
    flickerStars();
}
//Flickers stars and changes set of stars randomly
const flickerStars = ()=>{
    for(let i=0;i<flickeringStars;i++){
        setInterval(()=>{
            randomStars[i].flicker();
        },2200);
        setInterval(()=>{
            console.log("changing stars pattern");
            generateRandomStars();
            showRandomStars();
        },12200);
    }
}


// ---- Event Listeners ----

//Typing animation on load
window.addEventListener("load", ()=>{
    storeStars();
    generateRandomStars();
    showStars();
    flickerStars();  
});

//Handles star animation scaling on window resize
window.addEventListener("resize", ()=>{
    let id = window.setTimeout(function () { }, 0);
    while (id--) {
        window.clearTimeout(id); 
    }

    let starHandler = new Star(0,0,"white",0);
    starHandler.clearstars();

    generateRandomStars();
    storeStars();                
    showStars();
    flickerStars();
});

body{
background-color:black;
}

<html>
<body><canvas></canvas></body>
</html>

Answer 1

我无法计算出您想要获得的外汇。下面是一个简单的闪烁星星动画，该动画使用更改大小的小矩形来模拟闪烁。

降低帧频，使闪烁更加明显。

这非常有效，不需要复杂的状态更改或缓慢的渲染方法（例如模糊）

var W = 0, H = 0, count = 500, frame = 0, frameRate = 5;
const size = 1.5, minSize = 1, flick = 1, rate = 0.1;
const stars = [];
while (count--) { stars.push(Math.random() * 1024 * 8) } 
const ctx = canvas.getContext("2d");
requestAnimationFrame(mainLoop);
function mainLoop() {
  var len = stars.length, i = 0, x = stars[i];
  if (W !== innerWidth || H !== innerHeight) {
    W = canvas.width = innerWidth;
    H = canvas.height = innerHeight;
    ctx.fillStyle = "#FFF";
    frame = 0;
  }
  if (frame++ % frameRate === 0) {
    ctx.clearRect(0, 0, W, H);            
    ctx.beginPath();
    while (i < len) {
      const s = (i/len) * (size + (Math.random() < rate? flick * Math.random() : 0)) + minSize;
      const hs = s / 2;
      ctx.rect((x % W) - hs, ((x = stars[i++]) % H) - hs, s, s);
    }
    ctx.fill();
  }
  requestAnimationFrame(mainLoop);
}

canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
}

<canvas id="canvas"></canvas>