getImageData不讀取正確的值＆putImageData不更新畫布

我在更新畫布時遇到問題。該代碼託管在http://ssarangi.github.com/nombre/。問題是我正在加載一個紅色圖像，加載完成後，我將圖像轉換爲黃色，並希望將其重新渲染到畫布。getImageData不讀取正確的值＆putImageData不更新畫布

// Turn to Yellow 
function updateImage() { 
    // Update the image 
    var ctx = canvas2d.getContext("2d"); 
    var width = canvas2d.width; 
    var height = canvas2d.height; 
    var pixels = ctx.getImageData(0, 0, width, height); 

    for (var x = 0; x < width; ++x) { 
     for (var y = 0; y < height; ++y) { 
      var offset = (y * width + x) * 4; 
      pixels.data[offset] = 0; 
      pixels.data[offset+1] = 255; 
      pixels.data[offset+2] = 255; 
      pixels.data[offset+3] = 255; 
     } 
    } 

    ctx.putImageData(pixels, 0, 0); 
}

但是，ctx不更新像素。然而，在一個簡單的html頁面上做同樣的事情對我來說確實很有用。這個例子雖然啓用了WebGL。有人能指出我正確的方向嗎？謝謝。

來源

2012-03-22 ssarangi

你的鏈接給出了403禁止。請使用正確的URL編輯您的問題，或將您的代碼放入JSFiddle。 – Bojangles 2012-03-22 01:53:37

這很奇怪。我可以從多臺機器上訪問它。即使從我的手機.. – ssarangi 2012-03-22 02:00:25

https://github.com/ssarangi/nombre - 希望你也能從這裏看到問題。 – ssarangi 2012-03-22 02:08:54

提供的代碼沒有錯，只是它聲稱當它實際上製造藍綠色像素時產生黃色像素。這被修改和工作，使黃像素：

http://jsfiddle.net/TCf6f/

在您的網頁的代碼，當你在Chrome調試器設置斷點工作，特別是它把畫布水鴨爲您的代碼指定。當沒有斷點時它似乎沒有工作，我想像CanvasPixelArray的大小是應該責備的。小帆布會發生什麼？

請告訴我怪異，有時你可以設置一個斷點，看看操作部分的工作，喜歡這裏：

enter image description here

與早期斷點導致整個事情是正確的水鴨。

如果較小的畫布工作，請嘗試修改4或8個塊中的像素數組，然後查看會發生什麼情況。

來源

2012-03-22 04:55:20

謝謝西蒙..你是對的。放置一個斷點會部分更新緩衝區。但是，這隻適用於鉻現在。在Firefox上做同樣的事情不適合我。我猜測webgl會以某種方式干擾這一點。我創建了一個單獨的畫布對象，它可以正常工作。 – ssarangi 2012-03-22 16:03:17

getImageData不讀取正確的值＆putImageData不更新畫布

回答

相關問題