Как создать пересекающиеся фигуры в тэге html5 canvas - PullRequest
Новая
       2

Как создать пересекающиеся фигуры в тэге html5 canvas

1 голос
/ 15 февраля 2011

Я хочу иметь фигуры, которые пересекаются друг с другом. Пересечение должно быть пустым. Где-то я читал, что это достигается путем рисования по часовой стрелке и против часовой стрелки. Но я не могу понять это ...

это мой код: 

<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

1 Ответ

2 голосов
/ 15 февраля 2011

Рисование контуров противоположным образом работает только в том случае, если они находятся на одном пути и не соответствуют тому, что вы хотите в этом случае.

Вам нужно изменить глобальную составную операцию: 

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

Пример: http://jsfiddle.net/MEHbr/

Редактировать: И если вы хотите увидеть пример того, что они имеют в виду, рисуя противоположные направления на пути, я сделал пример этого и для вас (красным цветом).): http://jsfiddle.net/MEHbr/6/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...