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

我正在用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);



}

---

那么，如何设置动画使其向上移动？

我不确定这与画布有什么关系，但您可以简单地执行以下操作，使图像元素向上移动

将开始增量反转为减量

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之间的对话

---

但是，作为一个提示：当元素移动到视线之外时，你会想要停止循环，否则你会做不必要的代码调用，所以在其中添加一个条件来停止循环是值得考虑的。当我使用向下移动功能时，页面高度会随着图像的下降而增加，所以我仍然可以看到它在移动。当它向上移动时是否也可以这样做，这样它就不会移动到看不见的地方（但我们可以在滚动网站时跟踪它）？