PNG Прозрачность на холсте
Canvas поддерживает PNG альфа? У меня возникли проблемы с несколькими PNG, которые я добавил на холст. Края изображений черные и зазубренные, как будто не существует или распознается альфа-канал.
2 ответа
Если вы поместите 24-битный PNG с альфа-каналом на холст, он это поймет.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
Может быть, ваши PNG не чистые, т.е. имеют непрозрачные области на границах?
Используйте clearRect() или fillRect() перед перерисовкой изображения PNG, если вы делаете это в цикле requestAnimationFrame или setInterval.
Я наткнулся на этот вопрос, так как у меня была похожая проблема, но мой образ был уже 24-битным. Если бы цикл requestAnimationFrame перерисовывал изображение PNG на холсте и (как вы сказали), когда они перекрывали друг друга, в результате получались "обгоревшие" края, в которых должна была быть прозрачность альфа-эффекта "затухания".
Просто очистив область перед вызовом drawImage, вы можете предотвратить отображение этого изображения поверх самого себя.