Два сегмента кода (на холсте javascript), которые практически идентичны друг другу, ведут себя совершенно по-разному

Question

draw() рисует один квадрат 8x8, как и ожидалось (каждые 100 мс, но этот бит кода не включен). 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();    
    });
},

}

Полный код находится по адресуapollius.com/static/js/app.js

Answer 1

Я предлагаю вам преобразовать 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);

Вот скрипка: https://jsfiddle.net/nmerinian/2sunrthq/

Красный прямоугольник: нарисован с первой рабочей функцией рисования.
Синий прямоугольник: нарисован со вторым нерабочимФункция рисования.
Зеленый прямоугольник: нарисован с помощью работающей второй функции рисования.