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

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

在这里插入图片描述

相关推荐

  1. Vue使用 Canvas 绘制二维码

    2023-12-13 08:48:04       35 阅读
  2. vue3 使用html2canvas导出div指定区域内的图片

    2023-12-13 08:48:04       62 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-13 08:48:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-13 08:48:04       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-13 08:48:04       87 阅读
  4. Python语言-面向对象

    2023-12-13 08:48:04       96 阅读

热门阅读

  1. 【MODBUS】libmodbus库写一个Modbus TCP客户端

    2023-12-13 08:48:04       60 阅读
  2. 常用的线程锁

    2023-12-13 08:48:04       65 阅读
  3. 【C#】Microsoft C# 视频学习总结

    2023-12-13 08:48:04       57 阅读
  4. scala---03

    2023-12-13 08:48:04       57 阅读
  5. TrustGeo论文问题理解

    2023-12-13 08:48:04       70 阅读
  6. 常见的设计模式-简述

    2023-12-13 08:48:04       61 阅读
  7. PHP中GET和POST方法的区别是什么?

    2023-12-13 08:48:04       57 阅读
  8. 机器学习---KNN案例

    2023-12-13 08:48:04       61 阅读
  9. 使用 Vue 3 框架编写的简单日历组件

    2023-12-13 08:48:04       60 阅读