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

【问题标题】：Why jCanvas draws wrong pixels?为什么 jCanvas 绘制错误的像素？
【发布时间】：2013-03-28 23:58:46
【问题描述】：

我有一个像素图对象，每行包含一个列对象，其中包含颜色信息。然后我使用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/

【问题讨论】：

在jsFiddle中重新创建，让我们更好的理解问题
你想做什么？我不明白，在你的小提琴中，你只需要创建 6 个 2px 大小的点
也许你应该阅读 jCanvas API 文档...calebevans.me/projects/jcanvas/docs
在实际代码中，像素图来自 mysql 的 ajax，但问题是一样的 - 点位置被缩放了。

标签： javascript html5-canvas jcanvas

【解决方案1】：

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

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

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

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

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

【讨论】：