Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Размытые (прозрачные) края фигуры в canvas (https://javascript.ru/forum/events/77067-razmytye-prozrachnye-kraya-figury-v-canvas.html)

smart-create 21.03.2019 11:18

Размытые (прозрачные) края фигуры в canvas
 
Добрый день. Прошу помочь разобраться с canvas, есть задача сделать несложную анимацию, вот пример

все работает как и должно, но есть еще одно требования, края фигуры должны быть плавными, уходить в прозрачность. Вот пример того как это должно выглядеть

Какие только формулировки, я не пробовал гуглить. То ли гугл меня не понимает, то ли информации по этой теме действительно очень мало.

Заранее благодарен за любую помощь :help:

laimas 21.03.2019 12:55

https://developer.mozilla.org/en-US/...al/Compositing

smart-create 21.03.2019 15:22

laimas, я изучал эту документацию, и использую композицию для того что бы сделать форму треугольника, использую при этом операцию "source-out", но я получаю просто обрезанные края, хотя по ссылке что Вы прислали, для "source-out" как раз иллюстрируется вариант такой как мне нужен, с "плавными" краями.

Я не совсем понимаю почему по ссылке именно так изобразили "source-out", я проверял не раз, он так не работает, он просто по контору обрезает и все, не какого "плавного" перехода он не делает

Malleys 21.03.2019 19:04

Цитата:

Сообщение от smart-create
я изучал эту документацию, и использую композицию для того что бы сделать форму треугольника, использую при этом операцию "source-out", но я получаю просто обрезанные края, хотя по ссылке что Вы прислали, для "source-out" как раз иллюстрируется вариант такой как мне нужен, с "плавными" краями.

Так у вас вас всё правильно работает! Какой треугольник вы нарисовали, так оно и вырезает! Если вы хотите, чтобы были плавные края, то нужно начать с треугольника с плавными краями, который, например, можно сделать при помощи фильтра. Ещё поменял, source-out на source-in, т. е. не что исключать, а что брать.

https://jsfiddle.net/yab0st7q/

Цитата:

Сообщение от smart-create
Я не совсем понимаю почему по ссылке именно так изобразили "source-out", я проверял не раз, он так не работает, он просто по контору обрезает и все, не какого "плавного" перехода он не делает

А где вы там вычитали, что должен быть плавный переход? Кстати, если у исходного изображения инвертировать альфа-канал, то source-out можно поменять на souce-in.

Цитата:

Сообщение от smart-create
Я не совсем понимаю почему по ссылке именно так изобразили

Никто ничего не изображал, это живые примеры, которые можно редактировать, например, в том же jsfiddle!

Цитата:

Сообщение от Malleys
не какого "плавного" перехода он не делает

Это способы соединить две картинки вместе. Ваш ожидаемый «"плавный" переход» зависит от исходных картинок!

Там каждый пример идёт так: 🌉🌫🌁, их надо воспринимать так: 🌉+🌫=🌁

smart-create 22.03.2019 10:04

Malleys, огромное человеческое спасибо!)

Как всегда решение было простым - просто применит размытые. Но я если честно не знал о том как использовать размытые в canvas :( только начинаю разбираться с этим

То что я писал на счет плавного перехода, который изображен в документации по композициям и обрезке - я понимаю что source-out и прочие операции, по природе своей, самостоятельно не делают каких либо плавных переходов, меня просто сбило с толку вот это изображение

Еще раз Вам огромное спасибо что все растолковали!!!:dance:


Часовой пояс GMT +3, время: 04:20.