我对js有点陌生，遇到了一个问题。我试图创建一个天空中的星星动画。我通过在画布上随机创建小圆圈，然后随机选择闪烁的星星（不透明度已更改）来做到这一点。然后我意识到网站在缩放时无法正常工作，所以我决定为窗口大小调整实现一个onevent，当窗口调整大小时，我再次运行相同的函数来重新创建相同的过程，但是在清除所有以前的星星的同时，它们不会成倍增加。这里的问题是，clearRect方法似乎没有为我清除先前绘制的星星。:)，任何帮助将不胜感激。这是我的代码。let starCollection = [];let randomStars = [];let numberofStars = 100;let flickeringStars = 50;class Star{ constructor(x,y,color,radius){ 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; } //drawing individual stars draw(){ //Drawing 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.stroke(); this._c.fill(); this._c.closePath(); } //Fade in and out for stars flicker(){ setTimeout(()=>{this._color='#EBEBEB';},300); setTimeout(()=>{this._color='#D9D9D9';},600); setTimeout(()=>{this._color='#B6B6B6';},900); setTimeout(()=>{this._color='#898787';},1200); setTimeout(()=>{this._color='#4F4F4F';},1500); setTimeout(()=>{this._color='black';},1800); setTimeout(()=>{this._color='#4F4F4F';},2100); setTimeout(()=>{this._color='#898787';},2400); setTimeout(()=>{this._color='#B6B6B6';},2700); setTimeout(()=>{this._color='#D9D9D9';},3000); setTimeout(()=>{this._color='#EBEBEB';},3300); setTimeout(()=>{this._color='#FFFFFF';},3600); }}
1 回答
海绵宝宝撒
TA贡献1809条经验 获得超8个赞
您的问题出在闪烁功能中。即使在调整大小功能后，这些设置超时仍然会触发。所以他们称之为.draw（），即使这些星星已经从你的数组中移除了。该函数仍然记得“这”是什么。
您可以像这样清除所有超时：
window.addEventListener("resize", () => {
let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
canvas.width = window.innerWitdh;
canvas.height = window.innerHeight;
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
starCollection = [];
randomStars = [];
var id = window.setTimeout(function () { }, 0);
while (id--) {
window.clearTimeout(id); // will do nothing if no timeout with id is present
}
let event = new CustomEvent("showStars");
dispatchEvent(event);
});
下面是一个有 10 颗星星的示例，其中 5 颗闪烁。我把星星做得更大，这样更容易看到。
<html>
<head>
<style>
body {
background: black;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
let starCollection = [];
let randomStars = [];
let numberofStars = 10;
let flickeringStars = 5;
class Star {
constructor(x, y, color, radius) {
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;
}
//drawing individual stars
draw() {
//Drawing
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.stroke();
this._c.fill();
this._c.closePath();
}
//Fade in and out for stars
flicker() {
setTimeout(() => {
this._color = '#EBEBEB';
}, 300);
setTimeout(() => {
this._color = '#D9D9D9';
}, 600);
setTimeout(() => {
this._color = '#B6B6B6';
}, 900);
setTimeout(() => {
this._color = '#898787';
}, 1200);
setTimeout(() => {
this._color = '#4F4F4F';
}, 1500);
setTimeout(() => {
this._color = 'black';
}, 1800);
setTimeout(() => {
this._color = '#4F4F4F';
}, 2100);
setTimeout(() => {
this._color = '#898787';
}, 2400);
setTimeout(() => {
this._color = '#B6B6B6';
}, 2700);
setTimeout(() => {
this._color = '#D9D9D9';
}, 3000);
setTimeout(() => {
this._color = '#EBEBEB';
}, 3300);
setTimeout(() => {
this._color = '#FFFFFF';
}, 3600);
setTimeout(() => {
this.draw();
}, 300);
setTimeout(() => {
this.draw();
}, 600);
setTimeout(() => {
this.draw();
}, 900);
setTimeout(() => {
this.draw();
}, 1200);
setTimeout(() => {
this.draw();
}, 1500);
setTimeout(() => {
this.draw();
}, 1800);
setTimeout(() => {
this.draw();
}, 2100);
setTimeout(() => {
this.draw();
}, 2400);
setTimeout(() => {
this.draw();
}, 2700);
setTimeout(() => {
this.draw();
}, 3000);
setTimeout(() => {
this.draw();
}, 3300);
setTimeout(() => {
this.draw();
}, 3600);
}
}
window.addEventListener("showStars", () => {
//Stars animation
//Adding the stars to the array as objects
for (let i = 0; i < numberofStars; i++) {
let x = Math.floor(Math.random() * window.innerWidth);
let y = Math.floor(Math.random() * window.innerHeight);
// let starSize = (Math.random() + 1) - 0.7;
let starSize = 10;
starCollection.push(new Star(x, y, "white", starSize));
}
//Drawing all the stars on the screen
for (let i = 0; i < starCollection.length; i++) {
starCollection[i].draw();
}
//Storing random stars
const shuffleStars = () => {
randomStars = [];
for (let i = 0; i < flickeringStars; i++) {
randomStars.push(Math.floor(Math.random() * starCollection.length))
}
}
shuffleStars();
//Flickering stars randomly
const starflicker = () => {
console.log(starCollection);
console.log(randomStars);
setTimeout(() => {
requestAnimationFrame(starflicker);
for (let i = 0; i < randomStars.length; i++) {
starCollection[randomStars[i]].flicker();
}
shuffleStars();
}, 500);
}
starflicker();
})
window.addEventListener("resize", () => {
let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
canvas.width = window.innerWitdh;
canvas.height = window.innerHeight;
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
starCollection = [];
randomStars = [];
var id = window.setTimeout(function () { }, 0);
while (id--) {
window.clearTimeout(id); // will do nothing if no timeout with id is present
}
let event = new CustomEvent("showStars");
dispatchEvent(event);
});
dispatchEvent(new CustomEvent("showStars"))
</script>
</body>
</html>
查看这篇文章，了解有关超时清除代码如何工作的更多信息： javascript：清除所有超时？
添加回答
举报
0/150
提交
取消