Красный квадрат может вращаться:
Вращающиеся компоненты
Ранее в этом учебнике, красный квадрат был в состоянии передвигаться по gamearea, но он не мог повернуть или повернуть.
Для вращения компонентов, мы должны изменить способ, которым мы рисовать компоненты.
Единственный способ вращения для элемента холст будет вращаться весь холст:
Все остальное вы рисуете на холсте также будет вращаться, а не только конкретный компонент.
Именно поэтому мы должны сделать некоторые изменения в update() метод:
Во-первых, мы сохраняем текущий объект контекста холста:
ctx.save();
Затем мы переходим весь холст к центру конкретного компонента, используя метод перевода:
ctx.translate(x, y);
Затем мы выполняем разыскиваемого вращение с помощью rotate() метод:
ctx.rotate( angle );
Теперь мы готовы сделать компонент на холст, но теперь мы будем рисовать его с его центральное положение в позиции 0,0 на переведенного (and rotated) холст:
ctx.fillRect(width / -2, height / -2, width, height);
Когда мы закончили, мы должны восстановить объект контекста обратно в сохраненную позицию, используя метод восстановления:
ctx.restore();
Компонент является единственной вещью, которая вращается:
Компонент Конструкторская
component конструктор имеет новый Propery называемый angle , который радиан число, представляющее угол компонента.
update метод component конструктора были мы начертить компонент, и здесь вы можете увидеть изменения , которые позволят компонент вращаться:
пример
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();
}
Попробуй сам "