Comment dessiner une image transparente avec l'élément de toile html5

Je suis ciblage de google chrome. Est-il possible de dessiner des images transparentes sur une toile? Par transparence, je veux dire le dessin de l'ensemble de l'image à quelque chose comme 50% d'opacité.

source d'informationauteur Mr Bell

  1. 13

    L'élément canvas est un global alpha attribut qui permet d'appliquer une transparence partielle pour tout ce que vous dessinez.

  2. 16

    Vous pouvez faire cela en utilisant la globalAlpha propriété, comme ceci:

    <!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>

    Et oui, il ne fonctionne pas avec les images. Vérifié avec IE 9, 5 FF, Safari 5 et Chrome 12 sur Win 7.

  3. 4

    Il est possible si vous itérer à travers la toile de l'image-les données et définir la valeur alpha manuellement, puis exporter l'image transparente avec la toile.toDataURL de la méthode et de l'insérer dans une autre toile.