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/