очистить строку на HTML5 Canvas

Question

Есть ли способ убрать линию? На холсте у меня есть линия с непрозрачностью 0,5 и шириной 20 пикселей, скажем так. Теперь я хочу сделать это длиннее, значит провести другую линию прямо из старой. при этом совпадающие точки между старой и новой линиями становятся менее прозрачными (потому что теперь они состоят из двух линий). поэтому я хочу убрать старую линию и затем обвести новую.

как я могу это сделать?

спасибо

Answer 1

clearRect() - единственный способ сделать это.Хороший способ обойти эту проблему (если на холсте нарисовано много элементов) - наложить два холста в HTML с помощью абсолютного позиционирования, используя один для «статического» чертежа и верхний слой для чертежа, который вы планируетеочистить / перерисовать.Это также экономит процессорное время и снова рисует весь ваш холст.

Answer 2

Еще один элегантный вариант - установить для globalCompositeOperation значение «xor» и снова нарисовать линию ... так что она будет удалена

Answer 3

То, как вы рисуете на холсте, строго определяется API, но как это делается в программном и / или аппаратном обеспечении, зависит от разработчиков браузера.Некоторые браузеры используют аппаратное ускорение, а другие работают над этим.(например, с использованием программного средства рендеринга atm)

В компьютерной графике при рисовании чего-либо вы рисуете в буфер.И когда вы вызываете lineTo и ударяете, буфер обновляется, и вся информация, которая была в нижележащих пикселях, теряется (или частично теряется, если вы используете прозрачность), и нет способа вернуть ее, отменив (если не существует реализации, содержащей нагрузкистарых рисунков, но это было бы очень тяжело для памяти).

Таким образом, возможность отменить удар может сэкономить много времени процессора / графического процессора, НО, что значительно увеличит объем памяти

Answer 4

Полагаю, самым простым способом было бы просто очистить весь холст (используя clearRect) и просто нарисовать всю линию снова