在html5/javascript canvas中向上移動的動畫元素

我在JavaScript html canvas中製作簡單的動畫。目前我有一個功能，使元素（圖像）無限下降。我想反轉它並使其無限上升（從頁面底部開始，向上和向上移動），但是我所有的嘗試和實驗都失敗了。
我會感激任何想法！在html5/javascript canvas中向上移動的動畫元素

這是功能我有，其移動元素下來：

function moveDown(){ 
    start += 1; 
    var m = document.getElementById('money'); 
    m.style.top = start + "px"; 
    m.style.left = "300px"; 

} 
var start = 350; 


function rain() { 

    var m = document.createElement('img'); 
    m.id = "money"; 
    m.src = "images/holof.png"; 
    m.style.position = "absolute"; 
    m.style.top = start + "px"; 
    // m.style.top="0px"; 
    m.style.left = "300px"; 
    m.setAttribute("class", "money"); 
    document.body.appendChild(m); 

    setInterval(moveDown, 500); 



}

如何製作動畫去了呢？

來源

2014-02-18 Evelynne

我不確定這與畫布有什麼關係，但是您可以簡單地爲Image元素向上移動以下操作。

反向你開始增量遞減

function moveUp(){ 

    start--; /// move up 1 pixel 

    style.top = start + "px"; 
} 

var start = 350; 
var m = document.getElementById('money'); /// cache this here 
var style = m.style;      /// cache style 
style.left = "300px";      /// set once here

緩存會提高性能，因爲它減少JS和DOM之間的饒舌。

但是，作爲一個提示：當元素移出視線時，您會想要停止循環，否則您將執行不必要的代碼調用，因此在其中添加條件以停止循環是需要考慮的事情。

來源

2014-02-18 11:23:04 K3N

謝謝！當我使用向下移動功能時，頁面高度隨着圖像下降而增加，因此我仍然可以看到它正在移動。當它向上移動時可以做同樣的事情，所以它不會移出視線（但當我們滾動網站時，我們可以跟着它）？ – Evelynne

在html5/javascript canvas中向上移動的動畫元素

回答

相關問題