绘制例程仅在 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);
}

dragons数组中的所有图像都是不同的，cardlist是随机排列的。调试显示这些数字被正确传递。我的问题是，我没有得到随机的龙，侧身旋转并放置在它们在屏幕上的位置，而是得到了 4 条相同的龙。只有当 i=1,5,9,13 时它才能正确执行，其他时候我会得到之前发生的任何事情的副本。就好像 clearRect 命令或者 cardctx.drawImage 命令只是有时会触发，或者有延迟，或者事情正在乱序执行。有人见过这样的东西吗？

Answer 1

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

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

此外，声明所有变量，这样如果您意外重新声明，就会出错。

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

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

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

Draw routines only erratically executing in javascript

javascript

rotation

drawimage