Das rote Quadrat drehen kann:
rotierende Bauteile
Früher in diesem Tutorial, war das rote Quadrat auf der gamearea bewegen können, aber es könnte nicht drehen oder drehen.
So drehen Komponenten, müssen wir die Art, wie wir Komponenten zeichnen ändern.
Die einzige Rotationsverfahren für das Canvas-Element wird die gesamte Leinwand drehen:
Alles, was Sie auf der Leinwand ziehen wird auch gedreht werden, nicht nur die spezifische Komponente.
Deshalb müssen wir einige Änderungen in der machen update() Methode:
Zuerst speichern wir den aktuellen Leinwand Kontextobjekt:
ctx.save();
Dann haben wir die gesamte Leinwand in die Mitte der spezifischen Komponente zu bewegen, die übersetzen Methode:
ctx.translate(x, y);
Dann führen wir die gewünschte Drehung mit dem rotate() Methode:
ctx.rotate( angle );
Jetzt sind wir bereit , die Komponente auf die Leinwand zu ziehen, aber jetzt werden wir sie ziehen damit an Position 0,0 auf der verschobenen Mittelposition ist (and rotated) Leinwand:
ctx.fillRect(width / -2, height / -2, width, height);
Wenn wir fertig sind, müssen wir das Kontextobjekt wieder in die gespeicherte Position wieder herzustellen, wobei das Verfahren Wiederherstellen mit:
ctx.restore();
Die Komponente ist das einzige, was gedreht wird:
Die Komponente Constructor
Die component Konstruktor hat einen neuen propery genannten angle , die radian Zahl ist , die den Winkel der Komponente darstellt.
Die update - Methode des component Konstruktor ist , waren wir die Komponente ziehen, und hier können Sie die Änderungen sehen , dass die Komponente zu drehen können:
Beispiel
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();
}
Versuch es selber "