Использование SVG-правила Evenodd для заполнения в элементе canvas

Question

Кто-нибудь знает, возможно ли с помощью JavaScript в исходной или математической форме реализовать evenodd fill-rule из SVG в элементе HTML5 canvas? Ссылки на проекты, которые делают это, были бы полезны.

Answer 1

Это действительно старый вопрос, поэтому в то время все должно было быть по-другому, но с давних пор вы можете передать параметр fillrule в метод fill(). Это fillrule может быть либо "nonzero" по умолчанию, либо "evenodd".

var ctx = c.getContext('2d');
drawPath();
ctx.fill();
ctx.translate(70, 0);
drawPath();
ctx.fill('evenodd');
ctx.translate(70, 0);
drawPath();
ctx.stroke();

function drawPath(){
  ctx.beginPath();
  ctx.arc(30,30,20,0,Math.PI*2);
  ctx.lineTo(60,60);
  ctx.lineTo(0,0);
  ctx.closePath();
}

<canvas id="c"></canvas>

Answer 2

Математически вы имеете в виду реализацию алгоритма? Это, безусловно, возможно, см. http://gpolo.awardspace.info/fill/main.html. Это скорее демо, чем что-либо, но это решает эту проблему "математически".

Answer 3

Я задал себе тот же вопрос и наткнулся на этот Mozilla Bugreport .

Похоже, что это было предложено WHATWG (спецификации холста) авторами ошибок:

Крис Джонс, 2011-06-10:

Давайте подождем документов, пока эта спецификация не будет выглядеть на Whatwg (я опубликую сегодня).

Answer 4

Да, это должно быть возможно с globalCompositeOperation. Если я не ошибаюсь, значение «source-over» по умолчанию должно соответствовать SVG «evenodd» (в противном случае попробуйте несколько других и посмотрите, выглядит ли получающееся изображение идентичным).