Czerwony kwadrat może obracać się:
Elementy wirujące
Wcześniej w tym poradniku, czerwony kwadrat był w stanie poruszać się na gamearea, ale nie może zmienić lub obracać.
Aby obrócić elementy, musimy zmienić nasz sposób rysowania elementów.
Jedyną metodą rotacji dostępne dla elementu canvas będzie obracać całą płótnie:
Wszystko inne można narysować na płótnie będzie również obracać, nie tylko specyficzny składnik.
Dlatego musimy wprowadzić pewne zmiany w update() metodę:
Po pierwsze, możemy zapisać bieżący obiekt kontekstowe płótnie:
ctx.save();
Następnie przechodzimy całą kanwę do centrum konkretnego komponentu, przy użyciu metody translate:
ctx.translate(x, y);
Następnie wykonujemy poszukiwanych obrót za pomocą rotate() metodę:
ctx.rotate( angle );
Teraz jesteśmy gotowi, aby narysować element na płótnie, ale teraz będziemy go wyciągnąć z jego pozycji środkowej w pozycji 0,0 na przetłumaczonym (and rotated) płótnie:
ctx.fillRect(width / -2, height / -2, width, height);
Kiedy skończysz, musimy przywrócić obiekt kontekstowe powrotem do zapisanej pozycji, przy użyciu metody przywracania:
ctx.restore();
Komponent jest jedyną rzeczą, która jest obracana:
Komponent Konstruktor
component konstruktor ma nową propery zwany angle , który jest liczba Radian, który reprezentuje kąt komponentu.
update Sposób component konstruktora jest były zwracamy komponent, a tu można zobaczyć zmiany, które pozwolą składnik obrócić:
Przykład
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();
}
Spróbuj sam "