0

Canvas を使って簡単な炎のエフェクトを作りたいと思っています。現時点では、このコンテキスト (エラー) でダブル バッファーを使用するコーディングの側面を理解していません。私はブラケットを使用してコードを作成し、JSLint コードはうまくいきました。エラーは「未定義のプロパティ 'NaN' を設定できません」です。この例では何が間違っていますか?

/*global document: false */
/*global setInterval */

function getPixel(imageData, x, y) {
    "use strict";
    var index = 0, r, g, b;

    index = (x + y * imageData.width) * 4;
    r = imageData.data[index];
    g = imageData.data[index + 1];
    b = imageData.data[index + 2];

    return [r, g, b];
}

function setPixel(imageData, x, y, r, g, b, a) {
    "use strict";
    var index = 0;
    index = (x + y * imageData.width) * 4;
    imageData.data[index]     = r;
    imageData.data[index + 1] = g;
    imageData.data[index + 2] = b;
    imageData.data[index + 3] = a;
}

var element = document.getElementById("canvas");
var c       = element.getContext("2d");
var w       = element.width;
var h       = element.height;

// set buffer
var offScreenCanvas         = document.createElement('canvas');
offScreenCanvas.width       = w;
offScreenCanvas.height      = h;
var ctxOffscreen            = offScreenCanvas.getContext('2d');

function init() {
    "use strict";
    var x, y, i, j, r, g, b;

    for (j = 0; j < 10; j += 1) {
        for (i = 0; i < 800; i += 1) {
            x = i;
            y = j;
            r = 255 - Math.round(Math.random() * 50);
            g = 0;
            b = 0;
            setPixel(ctxOffscreen, x, y, r, g, b, 255);
        }
    }

    c.putImageData(ctxOffscreen, 0, 0);
}

function animation() {
    "use strict";
    var a1, a2, a3, a4, r, g, b, i, j;

    // draw
    for (j = 9; j < 100; j += 1) {
        for (i = 0; i < 800; i += 1) {
            a1 = getPixel(offScreenCanvas, i, j - 1);
            a2 = getPixel(offScreenCanvas, i, j + 1);
            a3 = getPixel(offScreenCanvas, i - 1, j);
            a4 = getPixel(offScreenCanvas, i + 1, j);

            r = Math.round((a1[0] + a2[0] + a3[0] + a4[0]) / 4);
            g = Math.round((a1[1] + a2[1] + a3[1] + a4[1]) / 4);
            b = Math.round((a1[2] + a2[2] + a3[2] + a4[2]) / 4);

            setPixel(offScreenCanvas, i, j, r, g, b, 255);
        }
    }

    // copy buffer onto the canvas
    c.putImageData(offScreenCanvas, 0, 0);
}

init();
setInterval(animation, 20);

エラーは setPixel 定義にあります。

  imageData.data[index]     = r;
4

1 に答える 1

1

まず、デバッガーと友達になりましょう。とても役に立ちます。Chrome のもの (Ctrl-Shift-I を押す) が最も使いやすいと思いますが、マイレージは異なる場合があります。

次に、キャンバスの幅と高さを含む HTML を投稿すると役に立ちます。あなたのコードから、明らかに 800x100 だったと推測しています。

そのため、setPixel に渡された imageData 変数が何らかの形で未定義であると考えましたが、デバッガーはそれ以外のことを示しました。これは適切に定義された context2d です。しかし、それはあなたが経験している問題につながります.

ctxOffscreen という変数を setPixel に適切に渡しますが、setPixel では、それが imageData オブジェクトであると想定しています。そうではありません。彼らは違います。

getImageData2 つのコンテキストを使用しているため、オフスクリーン コンテキストを単純化する必要があります。(代わりに を呼び出すことで、2 つのコンテキストを回避し、単純に 2 つの imageData をc.createImageData持つことができますが、現在持っているものを使用します。)

の直後にvar ctxOffscreen line、新しいものを追加します。

var imgData = ctxOffscreen.getImageData(0, 0, w, h);

それを (ctxOffscreen) の代わりに渡しますsetPixel。getPixel

setPixel(imgData, y, y, r, g, b, 255);

このFIDDLEをチェックしてください。走る。思い通りに走れると思います。

于 2013-06-10T15:27:13.903 に答える