为什么我的画布对象在setInterval()被调用后改变颜色?
问题描述:
我试图让我的画布对象在动画过程中每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");
}
});
答
您正在删除colourChanger
函数的返回值。你不能指望setInterval函数神奇地知道你想要使用它,所以你需要自己做。
而不是直接在一个间隔调用colourChanger
功能,调用一个函数anonymus和内部的改变形状的颜色:
setInterval(function() {
animationSPlanet.color = colourChanger(); // I still don't know how you store this thing's color.
}, 250);
'internalInterchange'是'undefined'(文字值),而不是' “未定义”(字符串)。做一个严格的比较字符串将是错误的,我认为这不是你想要的。 – Frxstrem
@Frxstrem好点,谢谢,但动画运行时颜色仍然不会改变颜色。只有当我持续按下按键''时,颜色才会慢慢变浅。 – seanrs97
请下次正确缩进您的代码。 –