當形狀部分透明時，如何在Canvas中從另一個形狀（XOR）切出一個形狀？

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 

然而，當無論是填充樣式具有α值1 <，或上下文的globalAlpha的是< 1，「切出」形狀不再是完全看不見的。

具體而言，如果alpha大於0.5並且< 1，您會看到形狀較輕的版本。如果alpha是0.5，那麼根本沒有可見的切口。如果α爲0,0，我們得到相反的結果：應該切出的形狀實際上比第一形狀更暗。

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

您可以嘗試更改alpha值以查看不同的效果。

有沒有什麼辦法可以完全切出一個形狀，當背景形狀有一個阿爾法< 1？

Answer 1

好吧，這是一個有點 「hackish的」，但在這裏我們無論如何去：

1. 集合成到XOR。
2. 通常從shape1中繪製「剪切」shape2。
3. 保存畫布。
4. 將合成設置爲正常（來源超過）。
5. 將globalAlpha設置爲您所需的級別。
6. 清除畫布並重新繪製保存的圖像。
7. 結果：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;