canvas绘制使用requestAnimationFrame导致栈溢出（vue2版本）

最新推荐文章于 2024-05-11 09:29:36 发布

大力水手~

最新推荐文章于 2024-05-11 09:29:36 发布

阅读量199

点赞数

文章标签： javascript 前端 canva可画

本文链接：https://blog.csdn.net/weixin_44705979/article/details/134955423

版权

在这里插入图片描述
vue2正确打开方式

 requestAnimationFrame(this.drawLine.bind(this));//一定要bind this 不创建新对象

drawLine() {
            this.ctx.clearRect(0, 0, 500, 300);
            console.log('绘制线条')
            // 设置线条样式
            this.ctx.strokeStyle = '#000000';
            this.ctx.lineWidth = 5;
            this.ctx.beginPath();

            // 定义路径（这里只是一个简单的直线）
            var x1 = 10;
            var y1 = 10;
            var x2 = x1 + 40 * Math.sin(Date.now() / 1000);
            var y2 = y1 + 40 * Math.cos(Date.now() / 1000);
            this.ctx.moveTo(x1, y1);
            this.ctx.lineTo(x2, y2);

            // 划线
            this.ctx.stroke();

            // 使用requestAnimationFrame继续动画
            requestAnimationFrame(this.drawLine.bind(this));
        }