使用globalCompositeOperation「destination-out」之後，如何獲得輪廓以包含新形狀？

我有一個帶有藍色輪廓的圓弧，然後是使用全局複合運算符「destination-out」覆蓋部分圓弧的圓，導致部分圓弧被取消/切斷，但這留下了部分新的沒有輪廓的形狀，有沒有簡單的方法可以重新建立輪廓？使用globalCompositeOperation「destination-out」之後，如何獲得輪廓以包含新形狀？

工作實例可以在這裏找到：http://jsfiddle.net/NY2up/

arc

var ctx = document.getElementById("display").getContext('2d'); 

ctx.beginPath(); 
ctx.arc(100, 100, 50, 0.0, 1.5, false); 
ctx.lineTo(100, 100); 
ctx.closePath(); 
ctx.fillStyle = 'red' 
ctx.fill(); 
ctx.strokeStyle = 'blue'; 
ctx.lineWidth = 5; 
ctx.stroke(); 

ctx.globalCompositeOperation = "destination-out"; 
ctx.beginPath(); 
ctx.arc(100, 100, 20, 0, Math.PI*2, true); 
ctx.fill(); 
ctx.closePath();

來源

2012-12-05 01AutoMonkey

@Loktar謝謝你的提示，我現在已經標出了合適的答案。 – 01AutoMonkey

我想你可以得出第三圓弧畫布

來源

2012-12-05 17:19:52

你的意思是這樣的嗎？：http://jsfiddle.net/kra86/，它有用，但它不夠準確/乾淨。也許我可以跳過複合材料並將形狀做成路徑，但不知道如何做曲線。 – 01AutoMonkey

erhm，錯誤的鏈接，這裏是：http://jsfiddle.net/kra86/1/ – 01AutoMonkey

關閉一個工作的解決方案：http://jsfiddle.net/kra86/2/ – 01AutoMonkey

live Demo

我所做的就是將globalComposition重置爲source-over，並在現場撫摸了部分弧線以產生效果。

ctx.beginPath(); 
ctx.arc(100, 100, 50, 0.0, 1.5, false); 
ctx.lineTo(100, 100); 
ctx.closePath(); 
ctx.fillStyle = 'red' 
ctx.fill(); 
ctx.strokeStyle = 'blue'; 
ctx.lineWidth = 5; 
ctx.stroke(); 


ctx.globalCompositeOperation = "destination-out"; 
ctx.beginPath(); 
ctx.arc(100, 100, 20, 0, Math.PI*2, true); 
ctx.fill(); 
ctx.closePath(); 

// reset the global comp and draw a partial arc with the proper radians. 
ctx.globalCompositeOperation = "source-over"; 
ctx.beginPath(); 
ctx.arc(100, 100, 20, 1.61,-0.11, true); 
ctx.stroke(); 
ctx.closePath();

來源

2012-12-05 21:18:47 Loktar

使用globalCompositeOperation「destination-out」之後，如何獲得輪廓以包含新形狀？

回答

相關問題