视频canvas绘制停止bug

src/views/home.vue

@@ -80,7 +80,12 @@ export default {
         houses:"#FF5FF6",//房子
         bridge:"#A200FF",//桥
         boat:"#00FFE4",//船
-      }
+      },
+
+      canvasVideoId:null,
+      videoFrameId:null,
+      canvasVideoIdTure:false,
+      videoFrameIdTure:false,
     }
   },
   created() {
@@ -98,6 +103,8 @@ export default {
     canvasInit(){
       let myCanvas = this.$refs.myCanvas
       let ctx = myCanvas.getContext('2d')
+      this.canvasVideoIdTure = true
+      this.videoFrameIdTure = true
       ctx.clearRect(0, 0, w, h);
       var w = myCanvas.width;
       var h = myCanvas.height;
@@ -117,12 +124,13 @@ export default {
       var h = myCanvas.height;
       ctx.clearRect(0, 0, w, h);
       // 在Canvas画布 添加图片
-      let img = new Image()
-      img.src = this.imageUrl
+      this.canvasVideoIdTure = true
+      this.videoFrameIdTure = true
+      let img = new Image();
+      img.src = this.imageUrl;
       img.onload =()=>{
         this.imageInfo.width = img.width
         this.imageInfo.height = img.height
-
         let w = img.width*800/img.width;
         let h = img.height*600/img.height;
         myCanvas.width = w
@@ -147,6 +155,8 @@ export default {
       var w = myCanvas.width;
       var h = myCanvas.height;
       ctx.clearRect(0, 0, w, h);
+      this.canvasVideoIdTure = true
+      this.videoFrameIdTure = true
       // 在Canvas画布 添加图片
       let img = new Image()
       img.src = this.imageUrl
@@ -249,10 +259,15 @@ export default {
         );
       });
       console.log(videoEl.width,videoEl.height)
+      this.videoFrameIdTure = true
+      this.canvasVideoIdTure = false
       const videoRender = () => {
-        window.requestAnimationFrame(videoRender);
+        this.canvasVideoId = window.requestAnimationFrame(videoRender);
         ctx.clearRect(0, 0, w, h);
         ctx.drawImage(videoEl, 0, 0, w, h);
+        if(this.canvasVideoIdTure){
+          window.cancelAnimationFrame(this.canvasVideoId)
+        }
       };
       videoRender();
     },
@@ -286,10 +301,15 @@ export default {
             "HAVE_CURRENT_DATA or greater for first time.",
         );
       });
+      this.canvasVideoIdTure = true
+      this.videoFrameIdTure = false
       const videoRender = () => {
-        window.requestAnimationFrame(videoRender);
+        this.videoFrameId = window.requestAnimationFrame(videoRender);
         ctx.clearRect(0, 0, w, h);
         ctx.drawImage(videoEl, 0, 0, w, h);
+        if(this.videoFrameIdTure){
+          window.cancelAnimationFrame(this.videoFrameId)
+        }
         loadingInstance.close();
       };
       videoRender();