html5 getImageData然后putImageData会导致图像褪色

我对Html5非常陌生，我想知道是否有人可以解释一下：

<script type="text/javascript">
        window.onload = function () {

            var canvas = document.getElementById('canvas'); //682 x 111 pixel canvas
            var context = canvas.getContext('2d');

            var image = new Image();
            image.src = "/Content/ImageTestOne/logo-for-dissolve.png"; //682 x 111 pixel image
            image.onload = function () { context.drawImage(image, 0, 0); drawFrame(); };

            function drawFrame() {

                window.requestAnimationFrame(drawFrame, canvas);

                imageData = context.getImageData(0, 0, canvas.width, canvas.height);

                //Do something to some pixels here that persists over time

                context.clearRect(0, 0, canvas.width, canvas.height);

                context.putImageData(imageData, 0, 0);
            };

       };
</script>

下面是画布的代码

<canvas id="canvas" width="682" height="111"></canvas>

---

这就是所有的代码。

requestAnimationFrame是一个实验性功能（2012年6月），它使用基于时间的帧访问。这样做的原因是为了避免动画中的延迟。 我建议您看看这个。

putImageData（）和getImageData（）可能有损。这本书中有一个注释：

由于与预乘alpha之间的转换具有损耗特性 颜色值，即刚刚使用putImageData（）设置的像素 可能会作为不同的值返回到等效的getImageData（）

另见这一相关问题：

---

我也尝试将此应用到我的游戏中，在游戏中，我将操纵选定的像素以产生效果，但它不会给我预期的结果

下面是一些示例代码，我用来操纵像素进行更改

获取图像信息并存储

var img = context.getImageData(0,0, width, height)
var imgdata = img.data
var len = imgdata.length

循环到所有数据并处理像素信息

var i = 0;

for(i; i<leng; i++) {
    var red = imgdata[i]
    var green = imgadata[i+1]
    var blue = imgdata[i+2]
    var alpha = imgdata[i+3]

    imgdata[i] = new value
    imgdata[i+1] = new value
    imgdata[i+2] = new value
    imgdata[i+3] = new value
}

var i=0；
对于（i；ii如果您阅读了我提供的文章，您可能已经注意到缺少帧指针。我没有缺少帧指针，正如我所说，上面的代码中没有包含更多的window.requestAnimationFrame，因为我认为它与此无关。这不是延迟问题-请阅读我遇到的症状-我有一些复杂的部分cle动画运行了相同的代码，它们运行得非常完美-我相信这与getImageData和putImageData之间的图像数据更改有关。请注意，我说“此代码不应该做任何事情！”（如果它工作正常）那么，为什么图像会随着时间的推移而迅速退化？@Rob，我无法在FF14.0上重现这个问题，你能修改实际的代码吗？你在使用什么浏览器？我确实注意到我的一个png文件有一个小故障。也许值得尝试一下不同的图像！我在使用Chrome-我回家后会在FF中检查它，并将其余的代码发布到e问题区域-由于跨域getImageData限制，我无法在JS fiddle中运行它…除非有办法解决它。@rob我尝试了chrome，但仍然无法重现问题。请满足您的实际需要：我建议您更改屏幕外鼠标位置的alpha通道。var idx=（x+（y*imagedata.width））*4；imagedata.data[idx+3]=0；//alpha通道…然后重置原始背景图像并将imagedata（imagedata。。。
var i = 0;

for(i; i<leng; i++) {
    var red = imgdata[i]
    var green = imgadata[i+1]
    var blue = imgdata[i+2]
    var alpha = imgdata[i+3]

    imgdata[i] = new value
    imgdata[i+1] = new value
    imgdata[i+2] = new value
    imgdata[i+3] = new value
}