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转换为字符串。在将它们传递给jCanvas之前，您需要将pixX和pixY转换为数字。

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

此外，jCanvas在绘制形状时执行许多数值计算，因此对于任何数值，它总是优先于字符串上的数字。

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

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

为什么Canvas会出错像素？

1 个答案: