如何在html5畫布標記中創建相交形狀

我想要形狀，相互交叉。交點應該是空的。在某處我讀到，這是通過順時針和逆時針方向來實現的。但我不能看着辦吧......如何在html5畫布標記中創建相交形狀

這是我的代碼：

<html> 
<head> 
     <script> 

      with(document.getElementById('myCanvas').getContext('2d')){ 


      shadowOffsetX = 10; 
      shadowOffsetY = 10; 
      shadowBlur = 20; 
      shadowColor = "rgba(0, 0, 0, .75)";   

      translate(50, 70); 
      scale(2, 2); 

      beginPath(); 

      fillStyle = 'red'; 

      strokeStyle = "white"; 
      fillStyle = "#FFFF00"; 
      beginPath(); 
      arc(100,100,50,Math.PI*2,0,true); 
      closePath(); 
      stroke(); 
      fill(); 

      strokeStyle = "white"; 
      fillStyle = "#FFFF00"; 
      beginPath(); 
      arc(50,50,50,-Math.PI*2,0,true); 
      closePath(); 
      stroke(); 
      fill(); 

      closePath(); 

      fill(); 

      } 

     </script> 
</head> 

<body> 
    <canvas 
    id  = myCanvas 
    width = 400 
    height = 400 
    style = "border:1px solid #000" 
     > 
    </canvas> 
</body>

什麼，我得到的是這樣的： http://dl.dropbox.com/u/1144075/Bild%207.png

來源

2011-02-15 tzippy

繪製路徑相反的方式僅適用，如果他們在同一條道路上，並不是你想要的在這種情況下。

你需要的是改變全球組合操作：

ctx.fillRect(50,50,50,50); 
ctx.globalCompositeOperation = 'xor'; 
ctx.fillRect(75,75,50,50);

例子：http://jsfiddle.net/MEHbr/

編輯：如果你想有一個路徑上繪製相反的方向看他們的意思的例子，我也爲你做了一個例子（紅色）：

來源

2011-02-15 14:19:20

如何在html5畫布標記中創建相交形狀

回答

相關問題