Question

我对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>

根据我对Html5的有限知识，除了不断显示“图像”之外，这段代码应该什么都不做。但相反，图像很快烧成几乎白色，这表明每次从画布读取或写入时，imageData都会稍微改变......

基本上我想淡化鼠标所在的图像，以便在鼠标移动时显示背景图像。有没有办法解决这个问题，或者我将不得不在这个过程中变得更有创意？反正我是否可以操纵“图像”ImageData，而不是每次都从画布中获取它？

在此先感谢，我尝试使用jpg和png加载到DOM而不是通过image.src，但它们都有相同的问题。

使用最新的Chrome btw。

这是requesttionAnimationFrame的设置，用于处理一系列故障转移到SetTimeout的浏览器：

(!window.requestAnimationFrame)
{
    window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback) {
                        return window.setTimeout(callback, 1000/60);
                    });
}

以下是画布的代码

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

这就是所有代码。

Answer 1

putImageData（）和getImageData（）可能是有损的。 the spec中有关于此的说明：

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

另见相关问题： Why does HTML Canvas getImageData() not return the exact same values that were just set?

Answer 2

我也试过将这个应用到我的游戏中，我将操纵选定的像素以产生效果，但它并没有给我预期的结果

这里是一些示例代码，用于操作像素进行更改

获取图像信息并存储

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
}

context.putImageData（img，0,0）

然后创建动画帧以查看效果

Answer 3

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

html5 getImageData然后putImageData导致淡入淡出的图像

3 个答案: