如何在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画布标记中创建相交形状

回答

相关问题