drawImage와 함께 캔버스를 다른 플레이어에 그리는 작업이 없습니다.

Question

모든 원수가 단일 캔버스 (ctxEnemy)로 그려지는 게임을 만들려고 노력하고 있습니다. 그러나 사용하기에 어려움을 겪고 있습니다. 회전 캔버스 기능은 동시에 모든 것을 회전시킵니다.

내 생각은 이것을 실제로 보조 캔버스에 그려서 그 캔버스를 회전시킨 다음 메인 캔버스로 그립니다. drawImage()이 모든 것을 망가뜨리지 않았다면 괜찮을 것입니다 ...

코드의 첫 번째 줄에는 테스트 용으로 ctxEnemy.drawImage(ctxAux,0,0)을 사용할 수 있었지만 모든 드로잉 기능 내에 배치 할 때마다 작동이 멈 춥니 다. .

질문 : 누군가 drawImage()이 작동하지 않는 이유를 설명 할 수 있습니까? 아니면 제 문제에 대한 더 간단한 해결책을 제공 할 수 있습니까?

Enemy.prototype.draw = function(){ 
    ctxAux.clearRect(0,0,gameWidth,gameHeight); 
    ctxAux.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); 
    //ctxAux.rotate(some angle); 
    ctxEnemy.drawImage(ctxAux,0,0); 
} 

Answer 1

데모이 간단한 spritsheet (2 개 스프라이트)를 사용하여 :

var sprites={ 
    shipOff:{x:0,y:0,w:90,h:90}, 
    shipOn:{x:90,y:0,w:90,h:90}, 
} 

당신 경우 : 개별 스프라이트의 각이 spritesheet에 어디에 http://jsfiddle.net/m1erickson/ZJunX/

먼저 정의를 적의 중심을 중심으로 적을 회전시키고 싶다면이 기능으로 적을 끌 수 있습니다 :

function drawEnemy(spritename,drawCenterX,drawCenterY,radianAngle){ 

    // get the desired sprite info from sprites[] 
    var sprite=sprites[spritename]; 

    // save the unrotated context state 
    ctx.save(); 

    // translate to the desired rotation point 
    ctx.translate(drawCenterX,drawCenterY); 

    // rotate by the desired angle 
    ctx.rotate(radianAngle); 

    // clip this desired sprite from the spritesheet and 
    // draw it on the canvas 
    ctx.drawImage(spritesheet, 
     sprite.x,sprite.y,sprite.w,sprite.h, 
     -sprite.w/2,-sprite.h/2,sprite.w,sprite.h 
    ); 

    // restore the context to its unrotated state 
    ctx.restore(); 
} 

함수 인수 : 캔버스에 적을 그릴 곳

• spritename이 스프라이트 개체 (예 : "shipOn")에서 이름이

• drawCenterX/drawCenterY입니다합니다 (적 스프라이트 이미지의 중심은 drawCenterX/drawCenterY에 위치)

• radianAngle은 스프라이트를 회전시킬 각도입니다.