Как нарисовать прозрачное изображение с помощью элемента холста html5

Я настраиваю Google Chrome. Можно ли рисовать прозрачные изображения на холсте? Под прозрачным я имею в виду рисование всего изображения примерно на 50% непрозрачности.

Ответы

Ответ 1

Элемент canvas имеет глобальный альфа-атрибут, который позволяет применять частичную прозрачность к чему-либо, что вы рисуете.

Ответ 2

Вы можете сделать это, используя свойство globalAlpha, например:

<!DOCTYPE HTML>
<html>
    <body>
        <canvas height="100" width="100" id="myCanvas"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.globalAlpha = 0.5;
            var myImage = new Image();
            myImage.src = "someImage.jpg";
            myImage.onload = function()
            {
                context.drawImage(myImage, 0, 0, 100, 100);
            };
        </script>
    </body>
</html>

И да, он работает с изображениями. Проверено с помощью IE 9, FF 5, Safari 5 и Chrome 12 на Win 7.

Ответ 3

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