Рисовать подпрограммы только ошибочно выполняются в JavaScript - PullRequest
Новая
       20

Рисовать подпрограммы только ошибочно выполняются в JavaScript

0 голосов
/ 08 марта 2019 
temp=document.getElementById("temp");
tempctx=temp.getContext("2d");
card=document.getElementById("card");
cardctx=card.getContext("2d");
cardctx.save();

for(i=0; i<14; i++)
{
    cardctx.restore();
    cardctx.clearRect(0,0,card.width,card.height);
    cardctx.rotate(90*Math.PI/180);
    cardctx.drawImage(dragons[cardlist[i]],30,-110);
    tempctx.drawImage(card,cardX[i]-10,cardY[i]-30);
}

Все изображения в массиве драконов различны, и список карт помещает их в случайном порядке.Отладка показывает, что эти цифры передаются правильно.Моя проблема в том, что вместо того, чтобы получать случайных драконов, поворачивать их в стороны и размещать на своих местах на экране, я получаю серии из 4 одинаковых драконов.Только когда я = 1,5,9,13, он работает правильно, в остальное время я получаю дубликаты того, что было раньше.Это похоже на то, что команда clearRect или, возможно, команда cardctx.drawImage запускаются только иногда, или есть задержка, или вещи выполняются не по порядку.Кто-нибудь видел что-то подобное?

1 Ответ

0 голосов
/ 08 марта 2019

Вы сохраняете свой контекст вне цикла и восстанавливаете его внутри цикла.

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

Кроме того, объявите все свои переменные, таким образом вы получите ошибки, если у вас есть случайное переопределение.

Я подозреваю, что вы хотите сделать что-то вроде этого: 

let temp=document.getElementById("temp");
let tempctx=temp.getContext("2d");
let card=document.getElementById("card");
let cardctx=card.getContext("2d");

for(let i=0; i<14; i++)
{
    cardctx.save();
    cardctx.rotate(Math.PI/2 * i);  // 90 degree increments for each card
    cardctx.clearRect(0,0,card.width,card.height);  // possibly not neccessary
    cardctx.drawImage(dragons[cardlist[i]],30,-110);
    tempctx.drawImage(card,cardX[i]-10,cardY[i]-30);
    cardctx.restore();
}
...