O quadrado vermelho pode girar:
Componentes rotativos
Anteriormente, neste tutorial, o quadrado vermelho foi capaz de se mover no gamearea, mas não podia virar ou girar.
Para girar componentes, temos de mudar a nossa forma de desenhar componentes.
O único método de rotação disponível para o elemento canvas irá girar a tela inteira:
Tudo o resto que você desenhar na tela, também será rodado, não só a componente específico.
É por isso que nós temos que fazer algumas mudanças no update() método:
Em primeiro lugar, vamos salvar o objeto de contexto lona atual:
ctx.save();
Em seguida, passamos toda a tela para o centro do componente específico, usando o método de traduzir:
ctx.translate(x, y);
Em seguida, executar a rotação desejada usando o rotate() método:
ctx.rotate( angle );
Agora estamos prontos para desenhar o componente para a tela, mas agora vamos desenhá-lo com a sua posição central na posição 0,0 no traduzida (and rotated) tela:
ctx.fillRect(width / -2, height / -2, width, height);
Quando terminar, temos de restaurar o objeto de contexto de volta à sua posição salvo, usando o método de restauração:
ctx.restore();
O componente é a única coisa que é girado:
O Construtor de componentes
O component do construtor tem uma nova propriedade é chamado angle , que é o número radiano que representa o ângulo do componente.
A update método da component construtor é onde tiramos o componente, e aqui você pode ver as mudanças que permitirão que o componente para rodar:
Exemplo
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();
}
Tente você mesmo "