Question

我想拥有相互交叉的形状。那个交叉点应该是空的。在某处我读到这是通过顺时针和逆时针绘制方向实现的。但我无法弄明白......

这是我的代码：

<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

Answer 1

相反的绘制路径仅在它们位于同一路径上时才有效，并且在此实例中不是您想要的。

您想要的是更改全局复合操作：

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

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

编辑：如果您想通过在路径上绘制相反的方向来查看它们的含义示例，我也为您做了一个示例（红色）：http://jsfiddle.net/MEHbr/6/

如何在html5 canvas标签中创建相交的形状

1 个答案: