getImageData没有读取正确的值＆amp; putImageData不更新画布

Question

我在更新画布时遇到问题。代码托管在http://ssarangi.github.com/nombre/。问题是我正在加载一个红色图像，加载完成后我将图像转换为黄色，并希望将其重新渲染到画布。

// 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。有人能指出我正确的方向。 感谢。

Answer 1

所提供的代码没有任何问题，只是它声称在实际上制作蓝绿色像素时会产生黄色像素。在这里它被修改和工作，制作黄色像素：

http://jsfiddle.net/TCf6f/

---

当您在chrome调试器中设置断点时，网页上的代码会起作用，特别是它会像您的代码指定的那样转换画布teal。当没有断点时它似乎不起作用，我想CanvasPixelArray的大小应该归咎于它。较小的画布会发生什么？

更奇怪的是，有时您可以设置断点并看到操作部分工作，如下所示：

早期的断点导致整个事情都是正确的青色。

如果较小的画布有效，请尝试修改4或8个块中的像素阵列，看看会发生什么。