如何将Alpha与合成图像结合起来?
问题描述:
我有一个HTML5画布。我正在使用KineticJS(KonvaJS)画布库。画布包含一个图像,如下所示。现在我想擦除像素,但与某个透明度级别相结合。红点将擦除透明度为0的像素。这在this问题中解决。绿点擦除像素为0.5的透明度。透明度越高,橡皮擦效果越小。如何将Alpha与合成图像结合起来?
我如何定义橡皮擦的实力?
答
您可以使用“目的地out`合成‘抹掉’像素的画布上。默认情况下,擦除将完全贯穿到背景。
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-out';
ctx.fillRect(100,50,50,50);
但是,您还可以通过将globalAlpha设置为小于1.00来控制删除了多少alpha。这会导致擦除操作减少现有像素的阿尔法 - 与颜色混合类似。
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-out';
ctx.globalAlpha=0.50;
ctx.fillRect(200,50,50,50);
答
// Get the canvas pixel array.
var img = context.getImageData(x, y, w, h);
// then loop through the array
// modifying each pixel one by one as you need
for (var i = 0, l = img.data.length; i < l; i += 4) {
img.data[i ] = ...; // red
img.data[i+1] = ...; // green
img.data[i+2] = ...; // blue
img.data[i+3] = ...; // alpha
}
// put back the data in canvas
context.putImageData(img, x, y);
erasor的强度可能会通过alpha通道设置。希望能让你开始。
是globalAlpha aplied我是图像的当前像素还是您的情况下新绘制的方块?是否可以改变每个橡皮擦的alpha值还是总是一样的? – confile 2015-02-10 21:53:52
好的事情是你可以改变globalAlpha只要你想!以前的擦除不会被感染,未来的擦除将在您的新globalAlpha中完成。如果擦除先前擦除的区域,则擦除将是先前的α擦除(s)和新的α擦除的总和。祝你的项目好运! – markE 2015-02-10 22:13:44
你能帮我解决这个问题吗? http://*.com/questions/28638627/draw-smooth-lines-on-a-canvas – confile 2015-02-20 21:35:11