“Стирание” в html5 холсте
У меня есть приложение эскизного представления в html5 холсте, и я пытаюсь выяснить лучший способ реализовать управление средством стирания. Первый импульс состоял в том, чтобы только иметь средство стирания, тянут [белый] цвет фона, но это проблематично, потому что, если пользователь перемещает изображение или другой слой туда, где они ранее стерлись, они видят, что белый тянет, где они стерлись.
Идеально, я хотел бы иметь изменение управления стиранием пиксели к прозрачному черному цвету. Я не могу просто использовать lineTo, чтобы сделать это, потому что, очевидно, он просто проводит черную прозрачную линию по нему, и это оставляет исходный doodle нетронутым. Какие-либо идеи о том, как сделать это?
Спасибо.
2 ответа
Если вы хотите нарисовать черную прозрачную обводку, вы, вероятно, захотите:
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,1)";
Не забудьте сохранить предыдущую операцию globalCompositeOperation, а затем восстановить ее позже, иначе прозрачность не будет работать должным образом!
Посмотрите на clearRect, если ваш ластик - прямоугольник. Функция clearRect, согласно спецификации, сделает пиксели в прямоугольнике прозрачно-черными, как вы хотите.
Если вы хотите иметь другие формы ластика [т.е. круг?], вы должны манипулировать пиксельными данными. Обратите внимание, что если вы хотите получить ластик, похожий на перо, это превращается в ад.
Самая полезная ссылка в мире: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element