«Стирание» в html5 canvas

Question

У меня есть приложение для рисования на холсте html5, и я пытаюсь найти лучший способ реализовать элемент управления ластиком.Первым побуждением было просто заставить ластик нарисовать цвет фона [белый], но это проблематично, потому что если пользователь перемещает изображение или другой слой туда, где он был ранее удален, он видит белый рисунок, где он стер.

В идеале, я бы хотел, чтобы элемент управления стиранием изменил пиксели на черные прозрачные.Я не могу просто использовать lineTo, чтобы сделать это, потому что, очевидно, он просто рисует прозрачную черную линию над ним, и исходный рисунок остается нетронутым.Любые идеи о том, как это сделать?

Спасибо.

Answer 1

Если вы хотите нарисовать черный прозрачный штрих, вам, вероятно, понадобится:

context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,1)";

Не забудьте сохранить предыдущую операцию globalCompositeOperation, а затем восстановить ее позже, иначе прозрачность не будет работать должным образом!

Answer 2

Обратите внимание, что Firefox 3.6 / 4.0 реализует функцию «копирования», сначала удалив весь фон.В документах w3c не ясно, что здесь должно произойти.Chrome (webkit?) Интерпретирует спецификации как «только там, где пиксели на самом деле прорисованы», например, результат обводки ().

destination-out с «rgba (255,255,255,1.0)», устанавливает фон впрозрачный, где пиксели в кадровом буфере не прозрачны.оставляя прозрачный фон в Chrome и Firefox.

скопируйте следующую страницу локально и поиграйте с различными цветами / прозрачностями для синей рамки и красного круга, и не забудьте сделать цвет фона страницы не белым!и

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Вы обнаружите, что браузеры сильно отличаются.

Answer 3

Посмотрите на clearRect, если ваш ластик представляет собой прямоугольник.Функция clearRect, в соответствии со спецификацией, сделает пиксели в прямоугольнике прозрачным черным, как вы хотите.

Если вы хотите иметь другие формы ластика [т.е. круг?], Вы должны манипулировать данными пикселей.Обратите внимание, что если вам нужен ластик, похожий на перья, он становится адским.

Самая полезная ссылка в мире: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element