Persegi merah dapat memutar:
berputar Komponen
Sebelumnya dalam tutorial ini, alun-alun merah mampu bergerak pada gamearea, tapi tidak bisa berubah atau memutar.
Untuk memutar komponen, kita harus mengubah cara kita menarik komponen.
Satu-satunya metode rotasi tersedia untuk elemen kanvas akan memutar seluruh kanvas:
Segala sesuatu yang lain Anda menggambar di kanvas juga akan diputar, tidak hanya komponen tertentu.
Itulah sebabnya kita harus membuat beberapa perubahan dalam update() metode:
Pertama, kita menyimpan saat objek konteks kanvas:
ctx.save();
Kemudian kita memindahkan seluruh kanvas ke pusat komponen tertentu, menggunakan menerjemahkan metode:
ctx.translate(x, y);
Kemudian kami melakukan rotasi yang diinginkan menggunakan rotate() metode:
ctx.rotate( angle );
Sekarang kita siap untuk menggambar komponen ke kanvas, tetapi sekarang kita akan menggambar dengan itu pusat posisi pada posisi 0,0 pada menerjemahkan (and rotated) kanvas:
ctx.fillRect(width / -2, height / -2, width, height);
Ketika kita selesai, kita harus mengembalikan objek konteks kembali ke posisinya disimpan, menggunakan mengembalikan metode:
ctx.restore();
komponen adalah satu-satunya hal yang diputar:
Komponen Constructor
The component konstruktor memiliki propery baru yang disebut angle , yang merupakan jumlah radian yang mewakili sudut komponen.
The update metode dari component konstruktor adalah kami menarik komponen, dan di sini Anda dapat melihat perubahan yang akan memungkinkan komponen untuk memutar:
Contoh
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();
}
Cobalah sendiri "