javascript - 在 html Canvas 之间复制像素数据

Question

我目前正在编写一个小型图像编辑器来学习一些 javascript。其中一个功能显然是绘图工具。当使用它时，我将这些像素绘制到实际 Canvas 顶部的另一个 Canvas 上，然后当鼠标被释放时，我将像素从顶部 Canvas 复制到下面的 Canvas 。

这是用于将绘制的像素复制到底层 Canvas 的代码。

this.applySketch = function() {
    this.revertStack.push(this.ctx.getImageData(0, 0, this.width, this.height));

    var real = this.ctx.getImageData(0, 0, this.width, this.height);
    var sketch = this.sketchctx.getImageData(0, 0, this.width, this.height);

    for(var i = 0; i < sketch.data.length; i += 4) {
        // check the alpha value to decide if to copy to the real canvas
        if(sketch.data[i+3] > 0) {
            real.data[i] = sketch.data[i];
            real.data[i+1] = sketch.data[i+1];
            real.data[i+2] = sketch.data[i+2];
            real.data[i+3] = sketch.data[i+3];
        }
    }

    this.ctx.putImageData(real, 0, 0);
    this.sketchctx.clearRect(0, 0, this.width, this.height);
}

我遇到的问题是像素在复制到另一层时看起来不一样。相反，无论我正在复制什么，周围都有一个白色像素的细轮廓。

鼠标释放前(当像素在顶层时) http://i.imgur.com/xHvN1iF.jpg

鼠标释放后(当它们被复制时) http://i.imgur.com/P0sdybs.jpg

我真的不知道这里发生了什么，因为它看起来很简单。抗锯齿有什么用吗？

谢谢

Answer 1

我想这是因为抗锯齿造成的。当你绘制平滑的线条时，线条附近的一些像素几乎是透明的，但不是完全透明的。 This fiddle说明了问题。因此，您需要更仔细地合并 alpha channel 。最简单的解决方案是将 alpha channel 值添加到原始值而不是完全替换它:

real.data[i+3] += sketch.data[i+3];

This fiddle显示效果。嗯，线看起来比原来的线粗。我想您应该使用其他一些公式来合并颜色。