为什么jCanvas绘制错误的像素？

Question

我有一个像素图对象，每一行包含一个列对象，其中包含一个颜色信息。 然后，使用switch()选择颜色，然后将其简单地绘制到画布上。 这是代码：

  for(var pixX in pixmap) {
    for(var pixY in pixmap[pixX]) {
      switch(pixmap[pixX][pixY]) {
        case 1: var pixColor='lightgray'; break;
        case 2: var pixColor='black'; break;
        default: var pixColor='forestgreen'; break;
        }
      $('canvas#surface').drawRect({
        fillStyle: pixColor,
        width: 1, height: 1,
        x: pixX, y: pixY,
        fromCenter: false
        });
      }
    }

它绘制像素，但是像素位置以某种方式缩放，尽管像素实际上只有1px大。 我无法确定它放大了多少。 过一会儿我在画布上绘画时，位置是正确的。 有什么问题？

编辑：我已经在jsFiddle上重新创建它： http : //jsfiddle.net/qyNTn/

Answer 1

简而言之， pixX和pixY变量通过JavaScript转换为字符串。 您需要pixX和pixY转换为数字，然后再将它们传递给jCanvas。

原因是因为JavaScript将每个键名称（对于任何对象）存储为字符串。 因此，当您使用for in循环遍历对象时，键名将始终是字符串。 换句话说， pixX和pixY被视为字符串，因此您需要使用诸如parseFloat的函数将它们转换为数字。

此外，jCanvas在绘制形状时会执行许多数值计算，因此对于任何数值，它总是首选数字而不是字符串。

无论如何，修复代码（以产生预期的行为）只需要对drawRect()参数进行一次更改。

x: parseFloat(pixX), y: parseFloat(pixY),