Question

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

它修改了一些很棒的HTML5 Canvas剪辑动画示例代码（http://tajvirani.com/2012/03/30/html5-canvas-animating-a-clip-mask-path/）

第一个循环是一个魅力，但从那时起有一些闪烁的人工制品。

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

我认为 c1.clearRect（0,0,386,380）; - JSFiddle的第42行 - 做到了，但没有快乐。

EXCEL -> SYSTEM -> [INSERT.PICTURE("C:\temp\picture.jpg")]

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);
  }

除此之外，我添加了一些变量来避免硬编码常量（moveSpeed，viewWidth，viewHeight，animInterval），并且我设置了图像的来源< em>在设置onload处理程序之后。

跟随小提琴应该接近你的需要：

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

如何在循环之间仅清除画布的动画部分

1 个答案: