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を使用して、image.srcではなくDOMにロードしようとしましたが、すべて同じ問題があります.

ちなみに最新のChromeを使用しています。

SetTimeout へのフェイルオーバーを使用してさまざまなブラウザーを処理する requestionAnimationFrame のセットアップを次に示します。

(!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() は損失を伴う可能性があります。これについての仕様にメモがあります：

あらかじめ乗算されたアルファ カラー値との間の変換には損失が伴うため、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 に答える