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

发布于 2024-10-17 05:38:20 字数 1341 浏览 1 评论 0原文

我想要彼此相交的形状。那么十字路口应该是空的。我在某处读到这是通过顺时针和逆时针绘制方向实现的。但我无法弄清楚...

这是我的代码：

<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

原文

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 this:
http://dl.dropbox.com/u/1144075/Bild%207.png

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吖咩 2024-10-24 05:38:20

仅当路径位于同一路径上且不是您在本例中所需的情况时，以相反的方式绘制路径才有效。

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

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

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

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

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/

回复收藏 0 原文

~没有更多了~