0

キャンバスの「アルファ ピクセル」をいくつかの配列 (Tarray) にコピーしています。Opera と Chrome ではやり方が異なることがわかりました。テストのために、ある範囲 (65,100) の値をバッファリングし、それらを「警告」しました。

this.Tarray = null;
.....   
create: function (e) {
  ..........
    var test = '';
    var ctx = this.canvas.getContext('2d');
    var pixels = ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
    this.Tarray = new Array(pixels.length / 4);

    for (var i = 0; i < pixels.length; i += 4) {
        this.Tarray[i / 4] = pixels[i + 3];
      // here we buffer some range of values
        if (i / 4 < 100 && i / 4 > 65)
            test += (',' + pixels[i + 3]);
    }
    alert(test)
  ...........
 }
......

これはオペラの結果です：

:

これはクロムの結果です：

なんで？

編集

透明効果を作成するコードは次のとおりです（画像はアルファ値を増加させます）：

    transperancyEffect: function () {

    // when menu first draws (but not displays) it has native alpha value
    //so we must change it before first display
    this.changeTransperancy(0, 0, this.canvas.width, this.canvas.height, this.canvas, 2);
    document.body.appendChild(this.canvas);
    var N = 20;

    var delay = Math.round(this.buildInfo.time / N);

    var self = this;


    function wrapper() {
        arguments.callee.myStaticVar = arguments.callee.myStaticVar || 0;
        arguments.callee.myStaticVar++;
        var ctx = self.canvas.getContext('2d');
        var imageData = ctx.getImageData(0, 0, self.canvas.width, self.canvas.height);
        //   self.changeTransperancy(0, 0, self.canvas.width, self.canvas.height, self.canvas, (arguments.callee.myStaticVar * 200/N + 4));
        var pixels = imageData.data;

        for (var i = 0; i < pixels.length; i += 4) {
            pixels[i + 3] = self.Tarray[i / 4]; // Math.round((self.Tarray[i / 4] * arguments.callee.myStaticVar )/ N);
        }
        ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);

        ctx.putImageData(imageData, 0, 0);

    }

    function callback() {
        self.registerListeners();
    }

    this.repeat(wrapper, delay, N, callback);
}

changeTransperancy - この関数は正しく動作します。最後のパラメーター - アルファ値。

繰り返し - setInterval に基づきますが、呼び出し回数 (N) とコールバック関数を指定できます。

この関数は何も変更してはなりません (pixels[i + 3] = self.Tarray[i / 4] - 同じアルファ値)。Opera ではすべて OK.In Chrome - ( . Chrome が正しくコピーされないためです。

4

1 に答える 1

1

通常、アルファ値の違いは、さまざまなブラウザーがアンチエイリアスを処理する方法によるものです。

ピクセルを直接操作して画像を描画しない限り、ブラウザー ベンダーごとに異なるアルファ値を取得することになります。

createImageDataそのため、 /を使用してキャンバスを描画すると、異なるアルファ値は表示されませんが、 /putImageDataなどの他の高レベル関数を使用すると、おそらくアルファ (および場合によっては RGB) の不一致に気付くでしょう。fillRectstrokeRect

于 2012-12-01T22:14:15.770 に答える