Question

我尝试在HTML5画布中进行此像素绘制，并且无法弄清楚导致此行为的原因。

我已将其设置为像素＆＃34;阻止＆＃34;是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);

稍微因为多余的indeces，看起来像C＆amp; P-thing： - ）

Answer 2

这段代码正在更新原始数组（warrior）：

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/

HTML Canvas绘图的麻烦

2 个答案: