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

Question

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

  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 大。我无法确定它缩放了多少。过了一会儿，当我在 Canvas 上绘制时，位置是正确的。有什么问题？

编辑:我在 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),