Pătratul roșu poate roti:
Componente rotitoare
Mai devreme în acest tutorial, pătrat roșu a fost capabil să se deplaseze în jurul valorii de pe gamearea, dar nu a putut transforma sau roti.
Pentru a roti componente, trebuie să ne schimbăm modul în care ne trage componente.
Singura metodă de rotație disponibilă pentru elementul canvas se va roti întreaga panza:
Orice altceva ai desena pe panza va fi, de asemenea rotită, nu numai componenta specifică.
De aceea , trebuie să facem unele schimbări în update() metoda:
În primul rând, vom salva obiectul curent context panza:
ctx. save() ;
Apoi vom muta întreaga panza la centrul componentei specifice, folosind metoda TRANSLATE:
ctx. translate(x, y) ;
Apoi vom efectua rotația dorită folosind rotate() metoda:
ctx. rotate( angle ) ;
Acum suntem gata să atragă componenta pe pânză, dar acum vom trage cu ea de poziție centrală la poziția 0,0 pe tradus (and rotated) pânză:
ctx. fillRect(width / -2, height / -2, width, height) ;
Când am terminat, trebuie să restabilim obiectul context înapoi în poziția sa salvat, folosind metoda restore:
ctx. restore() ;
Componenta este singurul lucru care este rotit:
Componenta Constructor
component Constructorul are un nou propery numit angle , care este numărul radian care reprezintă unghiul componentei.
update Metoda a component constructorului este rămăsesem trage componenta, și aici puteți vedea modificările care vor permite componentei să se rotească:
Exemplu
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();
}
Încearcă - l singur »