1

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

这是 requestionAnimationFrame 的设置，用于处理故障转移到 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>

这就是所有的代码。

4

3 回答 3

3

putImageData() 和 getImageData() 可能是有损的。规范中有关于此的注释：

由于与预乘 alpha 颜色值相互转换的有损特性，刚刚使用 putImageData() 设置的像素可能会作为不同的值返回给等效的 getImageData()。

另请参阅此相关问题： 为什么 HTML Canvas getImageData() 不返回刚刚设置的完全相同的值？

于 2012-09-23T04:30:24.903 回答
0

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

这是我用来操作像素以更改的一些示例代码

获取图像信息并存储

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)

然后创建动画帧看看效果

于 2014-09-24T05:15:24.123 回答
-1

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

于 2012-06-09T12:18:15.927 回答