两段几乎完全相同的代码（在javascript的画布中）具有截然不同的行为

draw（）

按预期绘制一个8x8正方形（每100ms绘制一次，但不包括此代码位）

afl_draw（）

在运行时绘制一个巨大的随机正方形。有人能帮我弄清楚发生了什么事吗

相关代码：

游戏={

draw: function(cycle) {
    Game.ctx.fillStyle = cycle.color;
    Game.ctx.beginPath();
    Game.ctx.moveTo(cycle.x - (cycle.width / 2), cycle.y - (cycle.height / 2));
    Game.ctx.lineTo(cycle.x + (cycle.width / 2), cycle.y - (cycle.height / 2));
    Game.ctx.lineTo(cycle.x + (cycle.width / 2), cycle.y + (cycle.height / 2));
    Game.ctx.lineTo(cycle.x - (cycle.width / 2), cycle.y + (cycle.height / 2));
    Game.ctx.closePath();
    Game.ctx.fill();

},
//afl: account for lag
afl_draw : function(cycle,positions){
    $(positions).each(function(i, item){


        item_split = item.split(',');
        item_x = item_split[0];
        item_y = item_split[1];

        console.log(item_x, item_y);

        Game.ctx.fillStyle = cycle.color;
        Game.ctx.beginPath();
        Game.ctx.moveTo(item_x - (cycle.width / 2), item_y - (cycle.height / 2));
        Game.ctx.lineTo(item_x + (cycle.width / 2), item_y - (cycle.height / 2));
        Game.ctx.lineTo(item_x + (cycle.width / 2), item_y + (cycle.height / 2));
        Game.ctx.lineTo(item_x - (cycle.width / 2), item_y + (cycle.height / 2));
        Game.ctx.closePath();
        Game.ctx.fill();    
    });
},

}

完整代码位于apolius.com/static/js/app.js

我建议您在使用前将item_x和item_y转换为整数。 记住，String.split（）输出一个字符串数组

因此，与此相反：

item_split = item.split(',');
item_x = item_split[0];
item_y = item_split[1];

这样做：

item_split = item.split(',');
item_x = parseInt(item_split[0], 10);
item_y = parseInt(item_split[1], 10);

这是一把小提琴：

红色矩形：使用第一个工作绘制功能绘制。
蓝色矩形：使用第二个非工作绘制功能绘制。

---

绿色矩形：使用现在正在使用的第二个绘制函数绘制。

您希望您的代码做什么，它会做什么？通过声明变量，您可以避免许多问题。我希望

afl\u draw（）

执行与

draw（）

相同的行为，为输入的每个位置绘制一个8x8正方形。