0

我正在将画布“alpha-pixels”复制到某个数组（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)
  ...........
 }
......

这是歌剧的结果：

：

这是镀铬结果：

为什么？

编辑

这是创建透明效果的代码（图片增加了它的 alpha 值）：

    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 - 此功能正常工作。最后一个参数 - alpha 值。

repeat - 基于 setInterval 但允许指定调用次数 (N) 和回调函数。

这个函数不能改变任何东西（pixels[i + 3] = self.Tarray[i / 4] - 相同的 alpha 值）。在 Opera 中一切正常。在 Chrome 中 - (. 那是因为 chrome 没有正确复制。

4

1 回答 1

1

alpha 值的差异通常是由于不同浏览器处理抗锯齿的方式造成的。

除非您通过直接像素操作来绘制图像，否则您必然会从不同的浏览器供应商处获得不同的 alpha 值。

因此，如果您使用createImageData/绘制画布putImageData，您应该不会看到不同的 alpha 值，但如果您使用其他更高级别的函数，例如fillRect/strokeRect您可能会注意到 alpha（有时甚至是 RGB）不匹配。

于 2012-12-01T22:14:15.770 回答