Javascript Canvas translate的值神秘地加倍了——有些东西画错了地方，但其他的却没有

我正在制作一个小画布游戏，并添加一些玩家可以收集的电源。以下是我用来让它们出现的方法：

thePowerUps.forEach ( function(t) 
{
    c.beginPath();
    c.save();
    c.translate(t.x,t.y);
    c.fillStyle = t.fill;
    c.moveTo(t.x - 15, t.y - 15);
    c.lineTo(t.x + 15, t.y - 15);
    c.lineTo(t.x + 15, t.y + 15);
    c.lineTo(t.x - 15, t.y + 15);
    c.lineTo(t.x - 15, t.y - 15);
    c.fill();
    c.restore();
    c.closePath();
 }); 

所以我在ups阵列中循环绘制每一个。在我的测试用例中，t.x和t.y都是200。但是这个代码会在400400处通电。我控制台记录了电源ups阵列，其中x和y返回200。如果我将玩家角色移动到坐标200200上，在400400处绘制的加电将消失，加电代码将执行

因此，就所有功能而言，它都位于正确的位置。它只是没有出现在那里。然而，玩家、坏人和子弹都在正确的坐标中

我试过这样做

    c.beginPath();
    c.save();
    c.translate(150,150);
    c.fillStyle = 'orange';
    c.moveTo(150 - 15, 150 - 15);
    c.lineTo(150 + 15, 150 - 15);
    c.lineTo(150 + 15, 150 + 15);
    c.lineTo(150 - 15, 150 + 15);
    c.lineTo(150 - 15, 150 - 15);
    c.fill();
    c.restore();
    c.closePath(); 

“静态”框，不查找数组中的值。这也在错误的位置绘制（本例中为300300）。我试着把它放在游戏循环中的不同位置（包括正确绘制部分的代码之前和之后）。没有效果

以下是僵尸坏人的代码，它们在正确的位置绘制：

c.beginPath();
c.save();
c.translate(i.x,i.y);
zomAngle = getZomAngle(i.x, i.y);
if (Player1.x - i.x < 0) {
c.rotate(zomAngle);
}
else {
c.rotate(zomAngle);
c.scale(-1,1);
}
c.translate(-i.x,-i.y);
c.fillStyle = i.fill;
c.moveTo(i.x - 18, i.y);
c.lineTo(i.x + 18, i.y + 15);
c.lineTo(i.x + 18, i.y - 15);
c.lineTo(i.x - 18, i.y);
c.fill();
c.restore();
c.closePath(); 

c.beginPath（）；
c、 save（）；
c、 翻译（i.x，i.y）；
zomAngle=getZomAngle（i.x，i.y）；
如果（Player1.x-i.x<0）{
c、 旋转（旋转角度）；
}
否则{
c、 旋转（旋转角度）；
c、 比例（-1,1）；
}
c、 翻译（-i.x，-i.y）；
c、 fillStyle=i.fill；
c、 移动到（i.x-18，i.y）；
c、 lineTo（i.x+18，i.y+15）；
c、 lineTo（i.x+18，i.y-15）；
c、 lineTo（i.x-18，i.y）；
c、 填充（）；
c、 恢复（）；
c、 closePath（）；

正如你所看到的，这基本上是一样的，除了坏人有一个旋转，让他们面对球员。我试着将其添加到加电中，但没有效果——它们仍然是在200200上行走时触发的，不管它们实际被画在哪里

有什么想法吗？

如果您使用translate（x，y），那么您下面的所有绘图说明都将从该位置相对绘制。现在基本上是两次偏移绘图说明。相反，您应该这样做：

thePowerUps.forEach ( function(t) 
{
    c.beginPath();
    c.save();
    c.translate(t.x,t.y);
    c.fillStyle = t.fill;
    c.moveTo(-15, -15);
    c.lineTo(15, -15);
    c.lineTo(15, 15);
    c.lineTo(-15, 15);
    c.lineTo(-15, -15);
    c.fill();
    c.restore();
    c.closePath();
 });