Как удалить остатки от места назначения? - PullRequest
Новая
       45

Как удалить остатки от места назначения?

1 голос
/ 15 октября 2011

При рисовании пути, а затем рисовании точно такого же пути с globalCompositeOperation = "destination-out", например: 

function drawPath(ctx){
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(120, 120);
  ctx.bezierCurveTo(30, 40, 30, 40, 40, 120);
  ctx.lineTo(0, 0);
  ctx.fill();
}

drawPath(ctx);
ctx.globalCompositeOperation = "destination-out";
drawPath(ctx);

Тогда есть остатки на сглаженных краях. Это происходит как в Firefox, так и в Chrome.

Могу ли я что-нибудь сделать, чтобы удалить их (или сделать так, чтобы они не появлялись), и если нет, то ожидается ли это?

1 Ответ

2 голосов
/ 15 октября 2011

Предположим, что один сглаженный пиксель должен быть нарисован с альфа-каналом / непрозрачностью a , затем вы удалите этот пиксель с той же непрозрачностью, тогда окончательная непрозрачность после прорисовки будет равна ( a * (1 - a )).

Таким образом, если a находится между или от 0% до 100%, то максимальное значение конечной непрозрачности будет 25% при a = 50%.

Итак, эти артефакты ожидаются .

Но если вы снова удалите этот пиксель с такой же непрозрачностью для n раз, тогда конечная непрозрачность будет равна ( a * (1 - a ) ) n ) и его максимальное значение будет продолжать уменьшаться. Так что продолжайте рисовать с destination-out достаточное количество раз, вероятно, удалит все артефакты. Я думаю, что 8 раз достаточно. Попробуйте: http://jsfiddle.net/dXVR7/

...