爲什麼jCanvas繪製錯誤的像素？

我有一個像素圖的對象，每一行都包含一個列對象，它包含一個顏色信息。然後我用switch()選擇顏色，然後我簡單地將它繪製到畫布上。下面是代碼：爲什麼jCanvas繪製錯誤的像素？

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/

來源

2013-04-06 Aslanex

在jsFiddle重新創建，以便我們可以更好地瞭解問題 – Givi 2013-04-06 16:33:20

你在做什麼？我不明白，在你的小提琴中，你只是創建2px大小的6個點大小 – Givi 2013-04-06 18:44:09

也許你應該閱讀jCanvas API文檔... http://calebevans.me/projects/jcanvas/docs/ – Givi 2013-04-06 18:50:26

簡而言之，pixX和pixY變量通過JavaScript的轉換爲字符串。在將它們傳遞給jCanvas之前，您需要將pixX和pixY轉換爲數字。

原因是因爲JavaScript將每個鍵名（作爲任何對象）存儲爲一個字符串。因此，當您使用for in循環遍歷對象時，鍵名稱將始終是一個字符串。換句話說，pixX和pixY被視爲字符串，因此您需要使用函數（如parseFloat）將它們轉換爲數字。

此外，jCanvas在繪製形狀時執行許多數值計算，所以它總是偏好任何數值的字符串上的數字。

無論如何，修復您的代碼（以產生預期的行爲）只需要對drawRect()參數進行一次更改。

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

來源

2013-08-24 21:17:09 caleb531

爲什麼jCanvas繪製錯誤的像素？

回答

相關問題