简体   繁体   English

画布上的“动画”背景

[英]“Animating” background on canvas

I've been trying to animate a "background" for a project I'm doing on a canvas. 我一直试图为在画布上执行的项目设置“背景”动画。 I'm using raphaelJS, and what I'm doing is 我正在使用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'});
}

and then calling it under a setInterval as such 然后像这样在setInterval下调用它

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

However, it's not working. 但是,它不起作用。 It paints the background, but then does not move up as I wanted it to. 它绘制了背景,但随后却没有如我所愿地向上移动。

because the first line in bg() is h=0; 因为bg()的第一行是h=0; , which resets h to 0 every time you call it... ,每次调用时都会将h重置为0 ...

to make it work, try moving h=0; 为了使它起作用,尝试移动h=0; out of bg() 超出bg()

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM