为了账号安全,请及时绑定邮箱和手机立即绑定

JS 清除不清除整个画布

JS 清除不清除整个画布

慕慕森 2022-09-23 18:34:02

我对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贡献1452条经验 获得超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:清除所有超时?


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信