How to create intersecting shapes in html5 canvas tag
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 it out...
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/
加载中,请稍侯......
精彩评论