Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.03.2019, 11:18
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 155

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

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

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

Заранее благодарен за любую помощь
Ответить с цитированием
  #2 (permalink)  
Старый 21.03.2019, 12:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,348

https://developer.mozilla.org/en-US/...al/Compositing
Ответить с цитированием
  #3 (permalink)  
Старый 21.03.2019, 15:22
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 155

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

Я не совсем понимаю почему по ссылке именно так изобразили "source-out", я проверял не раз, он так не работает, он просто по контору обрезает и все, не какого "плавного" перехода он не делает
Ответить с цитированием
  #4 (permalink)  
Старый 21.03.2019, 19:04
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 753

Сообщение от 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
не какого "плавного" перехода он не делает
Это способы соединить две картинки вместе. Ваш ожидаемый «"плавный" переход» зависит от исходных картинок!

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

Последний раз редактировалось Malleys, 21.03.2019 в 19:35.
Ответить с цитированием
  #5 (permalink)  
Старый 22.03.2019, 10:04
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 155

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

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas функции и JQ Tanya51 Общие вопросы Javascript 5 29.07.2017 14:41
Изменение свойств произвольной фигуры в canvas danies Общие вопросы Javascript 1 04.06.2015 20:58
размытые края svg? stasia44 (X)HTML/CSS 1 27.12.2013 00:31
IE11 размытые края vflash (X)HTML/CSS 2 12.12.2013 22:25