@gavrikoff13
Начинающий програмист

Как рисовать полупрозрачных линий на Canvas c размытыми краями?

Всем привет! Недавно писал вопрос по поводу канвы думал что щас получу ответ а дальше как нибудь додумаю до пилю, и чо то уже второй день пошел и ничего не получается. Вобщем мне нужно сделать так что бы на канве я рисовал линию не обращая внимания на ее прозрачность. Но помимо этого хочу добавить возможность сделать края размытыми (т.е градиент от цвета к прозрачности) jdevelop.info/images/articles-2013/line-02.png (только линию) (любую кривую)
На данном этапе у меня есть код https://jsfiddle.net/nwzn0uc7/

в нем рисуется линия по средством .quadraticCurveTo - это дает весьма неплохой эффект. Но я не знаю как его применить для того чтобы сделать градиент на краях линии. Я тут покрутил повертел и сделал что-то типа того https://jsfiddle.net/nwzn0uc7/1/. Но тут у меня встает 2 проблемы:

1) Цвет ложится не равномерно (т.е. цвет таки накладывается друг на друга)
2) Этот метод очень быстро засоряет память ( если водить зажатый курсор более 5 секунд все виснет)

Я не жду что вы скажете как решать) Но хотелось бы хотя бы понять через что и как добиться желаемого эффекта с минимальной затратой памяти.

Еще пара моментов:
Я нашел полезный сайтец. Тут увидел много интересного. Но там те что с расплывчатыми краями предполагают что сердцевина будет не прозрачная. Плюс по одному инструменту делать код конечно хорошо но я пытаюсь сделать несколько универсальный для того чтобы в будущем продумать как подключать дополнительные инструменты. Просто этих брашей для рисования огромное кол-во.
  • Вопрос задан
  • 432 просмотра
Пригласить эксперта
Ответы на вопрос 1
@GreatRash
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы