Question

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

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

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通道。最简单的解决方案是将alpha通道值添加到原始值，而不是完全替换它：

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

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

在html画布之间复制pixeldata

1 个答案: