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数组中的所有图像都不相同，并且卡片清单将它们随机排列。调试显示这些数字已正确传递。我的问题是，不是得到随机的龙，而是侧向旋转并放置在屏幕上的位置，而是四条相同的龙。只有当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();
}

绘制例程只能在javascript中错误地执行

1 个答案: