자바 스크립트 생성자로 캔버스 애니메이션하기

Question

안녕하세요 stackoverflow 커뮤니티! 먼저 생성자에 대해 많은 경험이 없다고 말해야합니다. 그럼. 제가하려는 것은, 화면의 위에서 아래로 날아 오르는 낙하산을 움직이는 것입니다. 나는 내가 낙하산 설정하는 생성자를 사용할 수 있다고 생각 :

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++; 
    }; 

을};

이 생성자는 '비행'라는 함수에 사용됩니다

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

그리고 창이로드 할 때이 기능이 트리거 '비행'

당신이 볼 수 무엇

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

이하는 것입니다 parachutist 화면 아래로 비행입니다. 하지만 불행히도 당신은 ... 지금, 그 긴 텍스트. (너무 길다는 것이 매우 유감 스럽다 .--) 내 질문은 : 내가 뭘 잘못하고 있는지 알고 있니? 내 건설업자가 맞습니까? 제가하려고하는 일이 이렇게 쓰여지는 것입니까? 성공적인 기회를위한 제안? (나는 나의 영어가 그렇게 끔찍하지 않길 바랄 뿐이다 :-))

아 나는 오류를 언급하는 것을 잊어 버렸다. TypeMissMatchError입니다. 'this.img'을 의미 이 라인에서 IMG 소자 아니다 : 지금

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

, I는 마르크의 예를 따랐다. 나를 낙하산 치료사로 보지 말고. 그것은이 라인에 오류를 보여줍니다 : 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'); 
     } 
    }; 
}; 

다시 붙어 있습니다. 하지만 지금은 이유를 모르겠다. 제발 도와주세요!?

Answer 1

데모 : http://jsfiddle.net/m1erickson/ym55y/

문제의 몇 :

(1) 사용할 수있는 창 너비 얻으려면 :

이

window.innerWidth 

(2)에서는 setInterval은 newParachute.animate를 호출합니다. 하지 낙하산 개체 -

setInterval(newParachute.animate, newParachute.speed); 

그러나 this 내부 창 개체를 애니메이션.

는이 같은 call 방법을 사용할 수 있습니다 애니메이션 올바른 this 제공합니다 :

는

var newParachute = new parachute(); 

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

(3) 당신은 청산 이전에 그려진 이미지를 다룰 필요가 또는 그들은 여전히 ​​캔버스에 표시됩니다.