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不更新画布

回答

相关问题