Как нарисовать прозрачное изображение с помощью элемента HTML5 canvas - PullRequest
Новая
       9

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

13 голосов
/ 27 мая 2010

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

Ответы [ 3 ]

16 голосов
/ 21 июня 2011

Вы можете сделать это, используя свойство 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.

14 голосов
/ 27 мая 2010

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

4 голосов
/ 28 марта 2011

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

...