使用JavaScript构造函数对画布进行动画处理

Question

Hello stackoverflow community! First I must say that I dont have much experience with constructors. So. What I am trying to do, is to animate a parachutist to fly from top to bottom of the screen. I thought I could use a constructor to set up a parachutist:

var parachute = function() {
    this.height = 35;
    this.width = 30;
    this.speed = 50;
    this.xPos = Math.round(Math.random() * (window.width - this.width));
    this.animate = function() {
        this.img = new Image();
        this.yPos = 0;
        this.img.onload = function() {
            ctxPara.globalCompositeOperation = 'copy';
            ctxPara.translate(0, this.yPos);
            ctxPara.drawImage(this.img, this.xPos, 0);
        };
        this.img.src = 'para.png';
        this.yPos++;
    };

};

This constructor is used in a function called 'fly':

var fly = function() {      
    var newParachute = new parachute();
    setInterval(newParachute.animate, newParachute.speed);
};

And this 'fly' function is triggered when the window loads:

window.onload = function() {
    var canvasBg = document.getElementById('canvasBg'); 
    // I splitt the Background and the parachutists in two canvas elements 
    // handling the problem (to erase content and draw new content) with 
    // the canvas animation.
    var canvasPara = document.getElementById('canvasPara');
    ctxPara = canvasPara.getContext('2d');
    canvasPara.width = window.width;
    canvasPara.height = window.height;
    canvasBg.width = window.width;
    canvasBg.height = window.height;
    fly();  
    clouds();  // background is loading here
};

What you should see, is a Parachutist flying down the screen. But unfortunately you don't... Now, after that Long text. (Iam very sorry that it is so long :-( ) My question is: Do you know what I am doing wrong? Is my constuctor correct? Is, what i am trying to do, supposed to be written like this? Any advices or suggestions for a succesfull opportunity? (I hope my english isn't that terrible I think it is :-) )

Oh i forgot to mention the error. It's a TypeMissMatchError. That means 'this.img' is not an img element at this line:

ctxPara.drawImage(this.img, this.xPos, 0);

Now, I followed the example of markE. Instead of showing me a parachutist. It shows me an error in this line: ctxPara.drawImage(this.img, this.xPos, this.yPos);

var fly = function () {
    var newParachute = new parachute();
    newParachute.img.load.call(newParachute);
    setInterval(newParachute.animate.call(newParachute), newParachute.speed);
};
var parachute = function () {
    this.height = 35;
    this.width = 30;
    this.speed = 25;
    this.xPos = Math.round(Math.random() * (window.innerWidth - this.width));
    this.img = new Image();
    this.yPos = 0;
    this.img.isLoaded = false;
    this.img.load = function () {
        this.img.isLoaded = true;
    };
    this.img.src = 'parachute.png';
    this.animate = function () {
        if (this.img.isLoaded) {
            ctxPara.clearRect(0, 0, canvasPara.width, canvasPara.height);
            ctxPara.drawImage(this.img, this.xPos, this.yPos); // ERROR: 'Unknown Error'.
            this.yPos++;
            console.log('animating');
        }
    };
};

I am stuck again. But now i don't even know the reason... Please help!?

Answer 1

Demo: http://jsfiddle.net/m1erickson/ym55y/

A couple of issues:

(1) To get the window width you can use:

window.innerWidth

(2) setInterval calls newParachute.animate.

setInterval(newParachute.animate, newParachute.speed);

But this inside animate the window object--not the Parachute object.

To give the correct this to animate you can use the call method like this:

var newParachute = new parachute();

setInterval(function(){newParachute.animate.call(newParachute);}, newParachute.speed);

(3) You need to deal with clearing previously drawn images or they will still show on your canvas.