画布动画在移动时留下痕迹/片段[关闭]答案

【问题标题】：Canvas animation is leaving trail/fragments as it moves [closed]画布动画在移动时留下痕迹/片段[关闭]
【发布时间】：2011-12-30 04:56:12
【问题描述】：

首先，我使用的是基于此的翻页动画：

http://www.netmagazine.com/tutorials/create-page-flip-effect-html5-canvas

我对其进行了一些更改，以适应我的应用程序。没有点击页面来打开它——你在画布外面按下一个按钮来让它动画。他们提供的示例动画流畅，但我的版本在翻页动画在画布上移动时留下了痕迹。以下是其中一个按钮的示例：

function page2Down(event) {
   if(page != 1)
   {
      var canvas = document.getElementById( "pageflip-canvas" );
      canvas.style.zIndex = 100;
      var a = function(){
         var canvas = document.getElementById( "pageflip-canvas" );
         canvas.width = canvas.width;
         canvas.style.zIndex = 0;
      };
      var b = setTimeout(a, 1100);
      if(page < 1)
         flips[page].dragging = true;
      else
         flips[page-1].dragging = true;
   }
}

function page2Up( event ) 
{
   var page_num = 1;
   while(page > page_num)
   {
      for( var i = total_pages; i > -1; i-- ) {
         if( flips[i].dragging ) {
            flips[i].target = 1;
            if(i>page_num)
               flips[i-1].dragging = true;
            page--;

         }
         console.log(page);
         flips[i].dragging = false;
      }
   }

   while(page < page_num)
   {
      for( var i = 0; i < flips.length; i++ ) {
         if(page == page_num) return false;
         if( flips[i].dragging ) {
            flips[i].target = -1;
            if(i<page_num)
               flips[i+1].dragging = true;
            page++;
         }
         console.log(page);
         flips[i].dragging = false;
       }    
   }        
}

render 和 drawfip 函数与示例中的相同。除了我已经指定的内容之外，我所做的只是一些变量：

var BOOK_WIDTH = 2264;
var BOOK_HEIGHT = 431;
var PAGE_WIDTH = 1132;
var PAGE_HEIGHT = 426;

路径看起来很糟糕，我需要将其移除。我相信这可能与页面大小有关，但我并不完全确定。

根据要求，这是 jsfiddle 上的精简版本（我清空了 svg 标记，这样您就不必再编写所有额外的代码了）：http://jsfiddle.net/vtS2s/

我所指的“轨迹”看起来像是额外的页面。它在 jsfiddle 版本中看起来并没有那么糟糕（它仍然存在），这让我相信它也与标签中的代码量有关。

【问题讨论】：

你的代码有在线测试示例吗？
你能在jsfiddle.net创建一个演示吗？
添加了演示 - 检查我编辑的问题。

标签： html animation canvas

【解决方案1】：

在您的render 函数中，您只调用一次clearRect。当您绘制新帧时，这会导致之前绘制的每个翻转继续存在。

每次绘制新框架时都需要clearRect（即drawFlip）。

【讨论】：