为什么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
        });
      }
    }

它绘制像素，但像素位置以某种方式放大，尽管像素实际上只有1 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),