HTML Canvas绘图出现问题

Question

我正在尝试在HTML5画布中绘制此像素，并且无法弄清楚是什么原因引起的。

我进行了设置，以使像素“块”为32 * 32（我现在只有字符，但是背景图块和其他字符的大小完全相同），因此窗口应为可被32整除的网格。

我有一个JS函数来偏移字符的X和Y，但我似乎正在保留偏移量，即使（我认为）它不应在全局范围内（仅在本地）更改它。

因此，我不能做一个简单的4x4网格。 按以下顺序调用它们：0,0; 0,1; 1,0; 1,1应该显示这样的网格：

xx
xx

而是这样做：

x 
xx 
  x

这是一个JSFiddle页面： http : //jsfiddle.net/pzwu38cq/

绘制像素的调用位于JS面板的最底部

我可能只是想念一些非常简单的东西，但是我对此表示感谢。

Answer 1

问题是，您总是通过更改相同的数组

pixels[i][0] += offsetX * 32;
pixels[i][1] += offsetY * 32;

尝试在drawPixels（）中进行深拷贝，如下所示：

http://jsfiddle.net/pzwu38cq/11/

我也变了

drawPixels(warrior, 0,0);
drawPixels(warrior, 0,1);
drawPixels(warrior, 1,0);
drawPixels(warrior, 1,1);

稍微有点因为多余的地方看起来像C＆P的东西:-)

Answer 2

此代码块正在更新原始数组（战士）：

pixels[i][0] += offsetX * 32;
pixels[i][1] += offsetY * 32;

将其切换为使用临时阵列将获得所需的结果。

drawPixel([
    pixels[i][0] + offsetX * 32,
    pixels[i][1] + offsetY * 32,
    pixels[i][2],
    pixels[i][3],
    pixels[i][4],
    pixels[i][5]
]);

演示： http : //jsfiddle.net/pzwu38cq/12/