"Стирание" в холсте html5

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

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

Спасибо.

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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