canvas绘制使用requestAnimationFrame导致栈溢出(vue2版本)

2023-12-13 07:40:52

在这里插入图片描述
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));
        }

在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_44705979/article/details/134955423
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。