Как вращать объект холста js, не портя весь холст - PullRequest
Новая
       47

Как вращать объект холста js, не портя весь холст

0 голосов
/ 26 апреля 2020

Я пытаюсь создать автомобильную игру, в которой машина вращается при каждом нажатии клавиши со стрелкой. Я создал автомобиль, но каждый раз, когда я пытаюсь повернуть его с помощью ctx.Rotate, холст портится.

My output after rotating the car

Если я удаляю Код, который вращает машину, игра работает отлично. Game without rotate code

Вот мой код, который вращается и др aws машина: 

ctx.translate((canvas.width/2) - 50, (canvas.height/2) - 50);
ctx.rotate(90*Math.PI/180);
ctx.translate((-canvas.height.width/2) + 50, (-canvas.height/2) + 50);
drawCircle(ctx, x, y);
drawRect(ctx, x, y);
drawWheels(ctx, x, y);

А вот код, который очищает холст: 

    function clear(obj) {
        obj.clearRect(0, 0, canvas.width, canvas.height);
    }

Когда я запускаю программу после поворота, она отлично работает для определенной точки холста, затем перестает очищаться, как если бы весь холст вращался. Когда он перестает очищаться, игра создает дубликаты машины каждый раз, когда я двигаюсь. Вот ссылка на код, над которым я работаю: https://jsfiddle.net/GautamGXTV/g8v31t4r/203/

Мне интересно, как это исправить ....

РЕДАКТИРОВАТЬ : @trincot исправил не очищающую проблему для меня, но возникла новая проблема. Автомобиль застревает после указанного c пункта. Я думаю, что это как-то связано с моей логикой c для проверки, достигает ли машина конца холста.

Автомобиль больше не будет двигаться вправо

car gets stuck

Вот код для этого: 

 if (y < canvas.height && y > 0 && x < canvas.width && x > 0) {

      /* Code for checking keys and moving the car*/

      } else {

    if (y == canvas.height) {

    y = canvas.height -10
    }
        if (y == 0) {

    y = 10
}
else if (x >= canvas.width) {

x = canvas.width - 10

} 
else if (x == 0) {

x = 10
}
    }
    }

Мне интересно, не повлияло ли это вращение на холст. Мой текущий код: https://jsfiddle.net/GautamGXTV/g8v31t4r/207/

1 Ответ

0 голосов
/ 26 апреля 2020

Это происходит потому, что метод clearRect также учитывает текущий перевод. Одним из решений является временный сброс перевода на исходный, затем очистка и восстановление перевода: 

function clear(obj) {
    obj.save();
    obj.setTransform(1, 0, 0, 1, 0, 0);
    obj.clearRect(0, 0, canvas.width, canvas.height);
    obj.restore();
}
...