如何只清除循环间画布的动画部分

Question

在此JSFiddle中链接的动画应该显示一个EKG风格的机器，并在屏幕上滚动一组线条，在短暂恢复为空白屏幕后重复循环。

这是一些伟大的HTML5画布的修改裁剪动画的示例代码（http://tajvirani.com/2012/03/30/html5-canvas-animating-a-clip-mask-path/）

第一循环工作的魅力，但也有从此一些闪烁文物。

如何在每次迭代前将原始外观恢复为原始外观（带有空白黑屏的机器图像）？

我以为c1.clearRect（0，0，386，380）; - JSFiddle的第42行 - 做到了这一点，但没有喜悦。

setInterval(animateManaging,6000); 

function animateManaging() { 
    // Grabs the canvas element we made above 
    var ca1=document.getElementById("cvs3"); 

    // Defines the 2d thing, standard for making a canvas 
    var c1=ca1.getContext("2d"); 

    // Creates an image variable to hold and preload our image (can't do animations on an image unless its fully loaded) 
    var img1 = document.createElement('IMG'); 

    // Loads image link into the img element we created above 
    img1.src = "http://s33.postimg.org/3pk551xcv/managing_values.png"; 

    // Creates the first save event, this gives us a base to clear our clipping/mask to since you can't just delete elements. 
    c1.save(); 

    // Our function for when the image loads 
    img1.onload = function() { 
     // clear off the canvas 


     // First call to our canvas drawing function, the thing that is going to do all the work for us. 
      drawc1r(0); 

     // The function that is doing all the heavy lifting. The reason we are doing a function is because 
     // to make an animation we have to draw the circle (or element) frame by frame, to do this manually would be to time 
     // intensive so we are just going to create a loop to do it. 'i' stands for the radius of our border 
     // so over time our radius is going to get bigger and bigger. 
     function drawc1r(i) { 
      // Creates a save state. Imagine a save state like an array, when you clear one it pops last element in the array off the stack 
      // When you save, it creates an element at the top of the stack. So if we cleared without making new ones, we would end up with nothing on our stage. 

      c1.save(); 

      // This clears everything off the stage, I do this because our image has transparency, and restore() (the thing that pops one off the stack) 
      // Doesn't clear off images, and so if we stick an image on the stage over and over, the transparency will stack on top of each other and 
      // That isn't quite what we want. 

      c1.clearRect(0, 0, 386, 380); 

      // Adds one to the interval count 
      i++; 

      // Tells canvas we are going to start creating an item on the stage - it can be a line, a rectangle or any shape you draw, but whatever 
      // after this path will be added to the clip when its called. I can have 3 rectangles drawn and that would make a clip. 
      c1.beginPath(); 

      // make the clipping rectangle, using i to make it grow on each interval 
      c1.rect(0,0,i*13,380); 

      // After everything is defined, we make a clip area out of it. 
      c1.clip(); 

      // Now that we have the clip added to it, we are going to add the image to the clip area. 
      c1.drawImage(img1, 0, 0); 

      // This pops one off the stack which gets rid of the clip so we can enlarge it and make it again on the next pass 
      c1.restore(); 

      // Here is the final size of the rectangle, I want it to grow until it hits 380 so we set a timeout to run this function again 
      // until we get the size we want. The time in milliseconds pretty much defines your framerate 


      if (i < 380) { 
       setTimeout(function() { 
        drawc1r(i); 
       }, 100); 
      } 
     } 
    } 
} 

这里

https://jsfiddle.net/0o1x1ryp/#&togetherjs=nftC29hATf

Answer 1

最大的问题是，你在呼唤animateManaging每六秒钟，所以您要创建许多抽屉，将在同一时间绘制和创建一个闪烁的“实例”。

与此不同，只需拨打animateManaging一次，然后自行处理循环：当达到右侧时，要清除事件并重新启动左侧：清除clearRect并将最后一个if更改为：

if (i * moveSpeed < viewWidth) { 
    // just resume if right side not reach 
    setTimeout(function() { 
     drawc1r(i); 
    }, animInterval); 
    } else { 
    // clear and restart from 0 when right side reached. 
    setTimeout(function() { 
     c1.clearRect(0, 0, viewWidth, viewHeight); 
     drawc1r(0); 
    }, animInterval); 
    } 

除此之外，我增加了一些VARS避免硬编码的常数（moveSpeed，viewWidth，viewHeight，animInterval），以及i设置图像的源后设置onload处理程序。

继小提琴应接近你的需求：

https://jsfiddle.net/gamealchemist/0o1x1ryp/5/