绘制例程只能在javascript中不规律地执行

Question

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的运行。只有当i = 1,5,9,13才正确执行时，其他时候我会得到之前发生的重复。就好像clearRect命令或者cardctx.drawImage命令有时只是触发，或者有延迟，或者事情正在按顺序执行。有没有人见过这样的东西？

Answer 1

您将上下文保存在循环之外并在循环内恢复它。

在旋转画布之前，您还要清除矩形。除非您的卡是透明的，否则您可能根本不需要清除，因为卡会覆盖当前内容。

此外，声明所有变量，如果您意外重新声明，那么您将收到错误。

我怀疑你想做这样的事情：

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