帆布动画留下痕迹/片段，因为它移动

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

呈现和drawfip函数与示例中的相同。所有我改变，除了我指定的已经是一些变量：

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

该小道看起来很不好，我需要删除它。我相信这可能与页面大小有关，但我不完全确定。

按照要求，这里的一对的jsfiddle一个精简版（我清空了SVG标签，这样你就不必通过所有额外的代码来犁）：http://jsfiddle.net/vtS2s/

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

来源

2011-11-16 Fibericon

你有一个在线测试代码的例子吗？ –

你可以在http://jsfiddle.net/上创建演示吗？ – pradeek

演示添加 - 检查我编辑的问题。 – Fibericon

在您的render功能中，您只需拨打clearRect一次。这会导致当您绘制新框架时，每个先前绘制的翻转画面都会继续存在。

每次画一个新框架（即drawFlip）时都需要clearRect。

来源

2011-11-22 23:11:40 jzila

帆布动画留下痕迹/片段，因为它移动

回答

相关问题