画布上的“动画”背景

时间:2012-03-04 22:40:48

标签: javascript jquery raphael

我一直试图为我在画布上做的项目设置“背景”动画。我正在使用raphaelJS,而我正在做的是

function bg(){

    h = 0;

    var terra = paper.rect(0, 500 + h, 900, 100);
    terra.attr({'fill': '#00E639', 'stroke': 'none'});

    var troposfera = paper.rect(0, -100 + h, 900, 600);
    troposfera.attr({'fill': '#C0866D', 'stroke': 'none'});

    var estratosfera = paper.rect(0, -700 + h, 900, 600);
    estratosfera.attr({'fill': '#4497BF', 'stroke': 'none'});

    var ozono = paper.rect(0, -900 + h, 900, 600);
    ozono.attr({'fill': '#E8EAE9', 'stroke': 'none'});

    var mesosfera = paper.rect(0, -1500 + h, 900, 600);
    mesosfera.attr({'fill': '#434392', 'stroke': 'none'});

    var termosfera = paper.rect(0, -2100 + h, 900, 600);
    termosfera.attr({'fill': '#3A435A', 'stroke': 'none'});

    var exosfera = paper.rect(0, -2700 + h, 900, 300);
    exosfera.attr({'fill': '#000000', 'stroke': 'none'});
}

然后在setInterval下调用它

var drbg = setInterval(function(){
    bg();
    h = h + 1;
}, 40);

然而,它不起作用。它会描绘背景,但不会像我想要的那样向上移动。

1 个答案:

答案 0 :(得分:1)

因为bg()中的第一行是h=0;,每次调用它时都会将h重置为0 ...

要使其正常工作,请尝试将h=0;移出bg()