动画元素在 html5/javascript 画布中向上移动

Question

我正在 JavaScript html 画布中制作简单的动画。目前我有一个使元素（图像）无限下降的功能。我想反转它并让它无限向上（从页面底部开始向上移动），但我所有的尝试和实验都失败了。
如有任何想法，我将不胜感激！

这是我拥有的功能，它将元素向下移动：

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



}

那我如何让它上升呢？

Answer 1

我不确定这与画布有什么关系，但您只需执行以下操作即可让您的 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 之间的对话。

但是，作为提示：当元素移出视线时，您需要停止循环，否则您将执行不必要的代码调用，因此需要考虑在其中添加条件以停止循环。