Установка прозрачного цвета в HTML5

Question

Можно ли установить прозрачный цвет для изображений, загружаемых в HTML5?

Я бы искал что-то похожее на функцию setColorKey (), доступную в SDL. Это можно использовать для простого удаления фона из некоторых листов спрайтов, которые я буду использовать.

Answer 1

Нет очень простого способа сделать это, но вы можете использовать для этого тег <canvas>.

Нарисуйте свое изображение на холсте, используя drawImage, а затем используйте getImageDataи putImageData для выполнения манипуляции с пикселями.

Вот несколько примеров манипуляции пикселями в канве: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

Answer 2

Для этого нет встроенной функции. Если это не должно быть динамическим, то вы можете удалить цвет из исходного изображения и сделать эти области прозрачными. Затем вы помещаете изображения в div, который имеет цвет фона, который вы только что удалили из изображения. После этого вы меняете цвет фона div, когда наводите курсор мыши на изображение.

Если это звучит как правильная идея, и вам нужен стартовый код, дайте мне знать.