Javascript холст объект застревает после вращения с помощью ctx.Rotate () - PullRequest
Новая
       89

Javascript холст объект застревает после вращения с помощью ctx.Rotate ()

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

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

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

car is stuck

Здесь мой код для поворота и рисования машины: 

    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);

Вот мой код для очистки машины (для refre sh): 

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

Logi c для проверки если автомобиль достигает краев холста:

Переменные x и y являются координатами x и y автомобиля 

var map = {}; // You could also use an array
    onkeydown = onkeyup = function(e) {
      e = e || event; // to deal with IE
      map[e.keyCode] = e.type == 'keydown';

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

      /* CODE FOR MOVING THE CAR GOES HERE */

      } 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/215/

1 Ответ

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

Вы действительно правы в том, что весь холст вращается, когда машина делает. Быстрое решение этой проблемы состояло бы в сохранении состояния холста перед вращением, а затем загрузке его после извлечения автомобиля. Было бы go что-то вроде этого: 

ctx.save();
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);
ctx.restore();

Также примечание, это хорошая идея - использовать один контекст холста для всего вашего рендеринга, так как кажется, что вы в настоящее время получаете 3 отдельных контекста. Если у вас есть дополнительные вопросы, не стесняйтесь спрашивать!

...