붉은 광장은 회전 할 수 있습니다 :
회전 구성 요소
이번 튜토리얼, 붉은 광장은 gamearea에 이동할 수 있었다, 그러나 그것은 켜거나 회전 할 수 없습니다.
구성 요소를 회전하려면, 우리는 우리가 구성 요소를 그리는 방법을 변경해야합니다.
캔버스 요소에 사용할 수있는 유일한 회전 방법은 전체 캔버스를 회전합니다 :
캔버스에 그리는 다른 모든 또한뿐만 아니라 특정 구성 요소, 회전됩니다.
우리는 일부의 변화를 확인해야하는 이유입니다 update() 메소드를 :
먼저, 현재 캔버스 콘텍스트 객체를 저장할 수 :
ctx.save();
그 다음 우리는 방법을 번역 사용하여 특정 구성 요소의 중심에 전체 캔버스를 이동 :
ctx.translate(x, y);
그 다음 우리는 사용하여 원하는 회전을 수행 rotate() 메서드를 :
ctx.rotate( angle );
이제 우리는 캔버스에 구성 요소를 그릴 준비하지만 번역에 위치 0,0에서 중심 위치의와 지금 우리는 그것을 그릴 것 (and rotated) 캔버스 :
ctx.fillRect(width / -2, height / -2, width, height);
우리가 완료되면, 우리는 방법을 복원하여, 다시 저장 위치로 컨텍스트 객체를 복원해야합니다 :
ctx.restore();
구성 요소는 회전되는 유일한 것입니다 :
구성 요소 생성자
component 생성자라는 새로운 때에 프로퍼티가 angle 구성 요소의 각도를 나타내는 라디안 번호입니다.
update 의 방법 component 생성자이었다 우리가 구성 요소를 그릴, 여기 당신이 구성 요소가 회전 할 수 있도록 변경 사항을 볼 수 있습니다 :
예
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.angle += 1 *
Math.PI / 180;
myGamePiece.update();
}
»그것을 자신을 시도