Question

通常使用Canvas从另一个形状切出一个形状，我使用了globalCompositeOperation选项“xor”：

var c2 = document.getElementById('canvas').getContext('2d');
c2.globalCompositeOperation = "xor";
c2.fillRect(0, 0, 200, 200);
c2.fillRect(170, 0, 30, 30); // shape 2 is cut out from shape 1

但是，当fillStyle的alpha值大于＆lt; 1，或上下文的globalAlpha是＆lt; 1，“切出”形状不再完全不可见。

具体而言，如果alpha> 0.5且<1，则会看到形状较轻的版本。如果alpha为0.5，则根本没有可见的切口。如果alpha <0.5，我们得到相反的结果：应该被切除的形状实际上比第一个形状更暗。

这可以在http://jsfiddle.net/N7aXY/2/看到。

您可以尝试更改Alpha值以查看不同的效果。

当背景形状具有α<1时，是否有任何方法可以完全切割出形状？ 1？

Answer 1

好的，这有点＆＃34; hackish＆＃34;，但我们仍然在这里：

将合成设置为XOR。
画到＆＃34;剪切＆＃34; shape2通常来自shape1。
保存画布。
将合成设置为普通（来源）。
将globalAlpha设置为您想要的级别。
清除画布并重绘已保存的图像。
结果：globalAlpha和globalCompositing协调工作！

这是代码和小提琴：http://jsfiddle.net/utttk/1/

ctx.fillStyle="red";
ctx.globalCompositeOperation="xor";
ctx.fillRect(0,0,200,200);
ctx.fillRect(170,0,30,30);
var png=canvas.toDataURL();
ctx.globalCompositeOperation="source-over"; // "normal" compositing
ctx.globalAlpha=.2;
var image=new Image();
image.onload=function(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
   ctx.drawImage(image,0,0);
}
image.src=png;

当形状部分透明时，如何在Canvas中从另一个（XOR）中剪切出一个形状？

1 个答案: