8 개의 매개 변수로 캔버스로 이미지 그리기

Question

이것이 일반적인 코드 문제에 대한 질문이 아니지만 실제로 코드 수정에 도움이 필요하다는 것을 알고 있습니다. 지금은 첫 번째 HTML5 프로그램을 독자적으로 진행하고 있으며 정말 간단한 톱 다운 슈터입니다. 지금 당장은 화면에 배가 나타나 좌우로 움직일 수 있도록 코드를 작성했습니다. 그러나 이제 총알이라고하는 새 개체를 만들려고합니다. 나는 배에서 코드를 복사했는데 작동시킬 수는 없습니다. 지금까지는 코드가 있습니다. 그것은 상당히 작아서 배를 이해할 수 있습니다.

function ship() { 
    this.width = 100; 
    this.height = 75; 
    this.drawX = gameWidth/2 - this.width/2; 
    this.drawY = gameHeight - this.height - 5; 
} 

나는이 기능을 사용하는 그릴 수행 다음은 선박 객체의 IT가 한 방향으로 움직이는 경우 이미지가 다르기 때문에 상단을 향해 그 물건은 이미지의 소스를 변경

ship.prototype.draw = function() { 
    clearCtx(ctxPlayer); 
    var srcX; 
    var srcY; 
    if(isRightKey) { 
     srcX = 0; 
     srcY = 75; 
    } else if (isLeftKey) { 
     srcX = 0; 
     srcY = 153; 
    } else { 
     srcX= 0; 
     srcY = 0; 
    } 

    ctxPlayer.drawImage(sprites,srcX,srcY,this.width,this.height,this.drawX,this.drawY, this.width, this.height); 
} 

또는 다른. 어쨌든 총알 개체는 다음과 같습니다.

function BulletGreen() { 
    var drawX = 0; 
    var drawY = 0; 
    var height = 33; 
    var width = 9; 
} 

자세히 알 수 있듯이 매우 유사합니다. 자, 내가 그리는 데 사용하는 코드는 다음과 같습니다.

BulletGreen.prototype.draw = function drawBulletsGreen() { 
    ctxPlayer.drawImage(sprites,350,0,this.width,this.height,this.drawX,this.drawY, this.width, this.height); 
} 

그러나이 명령은 콘솔에서 명령을 사용할 때 작동하지 않습니다. 오류를 반환하지는 않지만 캔버스를 전혀 변경하지 않는 것 같습니다. 그러나 다음과 같이하면

캔버스에 스프라이트 시트를 그립니다. 이런 종류의 질문이 여기에 오신 것을 환영하지 않더라도 사과하지만, 나는 아이디어가 부족합니다. 그것은 정말로 나를 혼란스럽게합니다.

편집 : 여기에 모든 항목이 업로드되었습니다.

Answer 1

당신이 맞다고 생각합니다 : ctxPlayer는 캔버스 객체이며 스프라이트는 새로운 이미지 src (예 : abc.png)입니다. drawimage에 8 개의 매개 변수를 사용하는 대신 5 개만 사용할 수 있습니까? 귀하의 경우에는 내가 어디

ctxPlayer.drawImage(sprites,this.drawX,this.drawY, this.width, this.height); 

,

this.drawX is the x coordinate where to place the image on the canvas 
this.drawY is the x coordinate where to place the image on the canvas 
this.width is width of the image 
this.height is height of the image 

유사 매개 변수가 나를 위해 일한, 그이 될 것이라고 생각 .. 나는 그들이 너무 당신을 위해 작동합니다 생각 :)이 참조 URL이

입니다 내가 찾은 것은 : http://www.w3schools.com/tags/canvas_drawimage.asp

또한 clearCtx (ctxPlayer)에서; 전체 캔버스를 지우거나 이전 이미지가 그려지는 위치는 지우시겠습니까? 전체 캔버스를 지우려면 완전히 다시 그려야합니다.