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

Question

I am making simple animations in JavaScript html canvas. Currently I have a function which makes the element (image) fall infinitely down. I would like to reverse it and make it go infinitely up (start at the bottom of the page and move up and up and up), but all my attempts and experiments failed.
I would be grateful for any ideas!

This is the function I have, which moves the element down:

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



}

How do I animate it to go up then?

Answer 1

I'm not sure what this has to do with canvas but you can simply do the following for your Image element to move upwards.

Reverse your start increment to a decrement

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

The caching will improve the performance as it reduces the talkativeness between JS and the DOM.

However, as a tip: when the element has moved out of sight you will want to stop the loop as otherwise you will do unnecessary code invoking so adding a condition in there to stop the loop is something to consider.