How to create intersecting shapes in html5 canvas tag_问答_开发者

How to create intersecting shapes in html5 canvas tag

开发者 https://www.devze.com 2023-02-10 18:49 出处：网络

I want to have to shapes, that intersect each other. The intersection should be empty then. Somewhere I read that this is achieved by clockwise and anticlockwise drawing direction. But i cant figure i

相关专题：canvas

this is my code:

<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>

What i get is t开发者_JS百科his: http://dl.dropbox.com/u/1144075/Bild%207.png

Drawing paths the opposite way only works if they are on the same path and isn't what you want in this instance.

What you want is to change the Global Composite Operation:

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

Example: http://jsfiddle.net/MEHbr/

Edit: And if you want to see an example of what they mean by drawing opposite directions on a path, I have made an example of that for you too (in red): http://jsfiddle.net/MEHbr/6/