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

最新推荐文章于 2025-02-13 14:39:19 发布

大力水手~

最新推荐文章于 2025-02-13 14:39:19 发布

阅读量266

点赞数

文章标签： javascript 前端 canva可画

本文链接：https://blog.youkuaiyun.com/weixin_44705979/article/details/134955423

版权

本文介绍了在Vue2中如何正确使用`requestAnimationFrame`实现流畅的动画效果，着重讲解了`bind(this)`的作用以及如何用`drawLine`函数绘制动态线条并持续更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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