javascript - 为什么调用 setInterval() 后我的 Canvas 对象没有改变颜色？

Question

我试图让我的 Canvas 对象在动画期间每 0.25 秒自动改变一次颜色，当 setInterval() 时，但每次我按下一个键时它都会改变。这是我执行动画的代码。

// Creating the shape
class Planet extends CompoundDrawable{
constructor(context,x = 0, y = 0, fillStyle = "#000", strokeStyle = "transparent", lineWidth = 0, deltas = new Map(), shapes = new Set()){
    super(context,x,y,fillStyle,strokeStyle,lineWidth,deltas);

    const mainPlanetShape = new Circle(context,0,0,fillStyle,strokeStyle,0,new Map(),80);
    this.shapes.add(mainPlanetShape);

    const largePlanetCrater = new Circle(context,randomBetween(-23,23),randomBetween(-23,23),"darkgrey","transparent",0,new Map(),11);
    this.shapes.add(largePlanetCrater);

    for(let i = 0; i < 7; i++){
        const planetCrater = new Circle(context,randomBetween(-23,23),randomBetween(-24,24),"darkgrey","transparent",0,new Map(),randomBetween(3,6));

        this.shapes.add(planetCrater);
    }
  }
}

// Placing the shape on Canvas and animating it
function startAnimationS(){
const animationSObjects = new Set();

const animationSPlanet = new Planet(context,-100,canvas.height/2,colourChanger(),"transparent",10,new Map());
// Context, x, y , fillStyle, strokeStyle, lineWIdth, new Map
animationSObjects.add(animationSPlanet);
//Setting up properties to animate
setTimeout(() => 
{
    animationSPlanet.deltas.set("x",400);
    animationSPlanet.deltas.set("angle",3);
}, 1000)
setTimeout(() => 
{
    animationSPlanet.deltas.delete("x");
    animationSPlanet.deltas.delete("fillStyle");
},4000)

// Perform the animation
function animationS(){
    requestId = requestAnimationFrame(animationS);
    context.clearRect(0,0,canvas.width,canvas.height);

    const diffSeconds = (Date.now() - lastTime) / 1000;
    lastTime = Date.now();

    if(diffSeconds > 0){
        for(const animationSObject of animationSObjects)
        {
            if(animationSObject.x >= canvas.width/2.2)
            {
               animationSObject.x = 10;
            }
            animationSObject.applyAnimation(diffSeconds);
            animationSObject.draw();
        }
     }
  }
animationS();
}

let counter = 0;
let intervalInterchange;
//Colour changing function
function colourChanger()
{
counter = counter - 10;

    let colour1 = 110 - counter;
        colour2 = 90 - counter;
        colour3 = 50 - counter;
        colour4 = 0.5;

    let finalColour = "rgba(" + Math.round(colour1) + "," + Math.round(colour2) + "," + Math.round(colour3) + "," + Math.round(colour4) + ")";
    return finalColour;
}
if(intervalInterchange === "undefined")
{
    setInterval(colourChanger,250);
} else {
    clearInterval(intervalInt);
    intervalInt = undefined;
}

// Calling the function by the event 'keydown'
document.addEventListener("keydown", (e) => {
e.preventDefault();
stopAnimation();
if(e.keyCode > 64 && e.keyCode < 91){
    if(e.keyCode == 83)
    {
        startAnimationS();
    }  else {
    alert("Please enter a letter between A and Z");
  }
});

Answer 1

您将删除 colourChanger 函数的返回值。您不能指望 setInterval 函数神奇地知道您想要使用它做什么，因此您需要自己执行此操作。

不要直接在间隔中调用 colourChanger 函数，而是调用 anonymus 函数并在其中更改形状的颜色:

setInterval(function() {
    animationSPlanet.color = colourChanger(); // I still don't know how you store this thing's color.
}, 250);