Прозрачность в canvas сжимает картинку

117
04 сентября 2019, 11:10

Только знакомлюсь с canvas и хотел бы выяснить, как в нем реализовать обычный opacity. Потому что при использовании globalAlpha картинка сжимается, а не исчезает. Планируется сделать слайдер с fade эффектом и при пролистывании слайдов, создается неприятный эффект из-за некорректной работы globalAlpha. Как это можно исправить?

Наброски: https://jsfiddle.net/tqyod1xw/1/

Answer 1

Тут пара вариантов, цвета меняются путем применения fillStyle

ctx.fillStyle = "rgba(0, 0, 00, 0.5)";

А так можно использовать globalAlpha или globalCompositeOperation

ссылка на вариант смены картинок codepen

globalCompositeOperation globalAlpha

READ ALSO
Как передать данные в json файл при нажатии на кнопку в другой файл

Как передать данные в json файл при нажатии на кнопку в другой файл

Сейчас оно заменяет данные в namejson(полностью его стирает и добавляет новое) и как то не так, а нужно их добавить

132
Как выполнить последовательно несколько асинхронных фунций в Javascript без коллбэков?

Как выполнить последовательно несколько асинхронных фунций в Javascript без коллбэков?

Как написать простой, понятный, легко обслуживаемый код, который запускает последовательно несколько асинхронных функций в javascript/jQuery? (когда...

126
Помощь с подключением js файлом на ajax сайте

Помощь с подключением js файлом на ajax сайте

И так уважаемые эксперты, есть сайт ajax, но котором есть 10 одинаковых страниц, но с разным выводом инфы из бд, и каждый раз требуется выполнять...

109
Как сделать кастомные типы TypeScript (Number, Array, Object, Boolean)?

Как сделать кастомные типы TypeScript (Number, Array, Object, Boolean)?

Можете помочь, пожалуйстаПерехожу с JS На TS, и сразу встал в ступор

102