JS 清除不清除整个画布

您的问题出在闪烁功能中。即使在调整大小功能后，这些设置超时仍然会触发。所以他们称之为.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：清除所有超时？

JS 清除不清除整个画布

1回答