Comment changer l'opacité (alpha, transparence) d'un élément dans un élément canvas après qu'il a été dessiné?

en utilisant L'élément HTML5 <canvas> , je voudrais charger un fichier image (PNG, JPEG, etc.), dessinez-le sur la toile en toute transparence, puis faites-le fondre. J'ai trouvé comment charger l'image et la dessiner sur la toile, mais je ne sais pas comment changer son opacité une fois qu'elle a été dessinée.

voici le code que j'ai jusqu'à présent: 

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

Sera quelqu'un merci de me diriger dans la bonne direction comme une propriété ou d'une la fonction à appeler qui va changer l'opacité?

173
demandé sur vaxquis 2010-03-02 01:22:24

7 réponses

je suis également à la recherche d'une réponse à cette question, (pour clarifier, je veux être en mesure de dessiner une image avec l'opacité définie par l'utilisateur comme la façon dont vous pouvez dessiner des formes avec l'opacité) si vous dessinez avec des formes primitives, vous pouvez définir la couleur de remplissage et de course avec alpha pour définir la transparence. Pour autant que j'ai conclu en ce moment, cela ne semble pas affecter le dessin d'image. 

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

j'ai conclu que le réglage du globalCompositeOperation fonctionne avec les images. 

//works with images
ctx.globalCompositeOperation = "lighter";

je me demande s'il n'y a pas une troisième façon de définir la couleur pour que nous puissions teinter les images et les rendre transparentes facilement.

EDIT:

après avoir creusé plus loin, j'ai conclu que vous pouvez définir la transparence d'une image en définissant le paramètre globalAlpha avant de dessiner l'image: 

//works with images
ctx.globalAlpha = 0.5

si vous voulez obtenir un effet de décoloration au fil du temps, vous avez besoin d'une sorte de boucle qui change la valeur alpha, c'est assez facile, une façon de l'atteindre est la fonction setTimeout , regardez ça pour créer une boucle à partir de laquelle vous modifiez l'alpha avec le temps.

268
répondu djdolber 2018-01-05 06:20:34

un exemple de code plus simple pour l'utilisation de globalAlpha : 

ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore();

si vous avez besoin de img pour être chargé: 

var img = new Image();
img.onload = function() {
    ctx.save();
    ctx.globalAlpha = 0.4;
    ctx.drawImage(img, x, y);
    ctx.restore()
};
img.src = "http://...";

Notes:

  • définissez le 'src' dernier, pour garantir que votre gestionnaire onload est appelé sur toutes les plateformes, même si l'image est déjà dans le cache.

  • changement D'enveloppe à des trucs comme globalAlpha entre un save et restore (en fait utilisez les lots), pour s'assurer que vous ne sabotez pas les paramètres d'ailleurs, en particulier lorsque des bits de code de dessin vont être appelés à partir d'événements.

103
répondu Ian 2014-07-05 11:37:15

Edit: La réponse "correct" n'est pas correct.

C'est facile à faire. Essayez ce code, remplacement d' "ie.jpg "avec n'importe quelle image que vous avez à portée de main: 

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var canvas;
            var context;
            var ga = 0.0;
            var timerId = 0;

            function init()
            {
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                timerId = setInterval("fadeIn()", 100);
            }

            function fadeIn()
            {
                context.clearRect(0,0, canvas.width,canvas.height);
                context.globalAlpha = ga;
                var ie = new Image();
                ie.onload = function()
                {
                    context.drawImage(ie, 0, 0, 100, 100);
                };
                ie.src = "ie.jpg";

                ga = ga + 0.1;
                if (ga > 1.0)
                {
                    goingUp = false;
                    clearInterval(timerId);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <canvas height="200" width="300" id="myCanvas"></canvas>
    </body>
</html>

la clé est la propriété globalAlpha.

Testé avec IE 9, FF 5, Safari 5, et Chrome 12 sur Win7.

14
répondu james.garriss 2011-06-23 14:21:50

Le post est vieux, jusqu'à présent, je vais aller avec ma suggestion. La Suggestion est basée sur la manipulation de pixels dans le contexte de canvas 2d. De MDN:

vous pouvez manipuler directement les données des pixels dans les toiles au niveau des octets

pour manipuler les pixels, nous allons utiliser deux fonctions ici-getImageData et putImageData

getImageData utilisation de fonction:

var myImageData = cadre.getImageData(gauche, haut, largeur, hauteur);

et syntaxe putImageData:

contexte.putImageData(myImageData, dx, dy); //dx, dy - de décalage x et y sur votre toile

Où contexte est votre toile contexte 2d

donc pour obtenir les valeurs de bleu vert rouge et alpha, nous allons faire ce qui suit: 

var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];

où x est x offset, y est de décalage sur y sur toile

donc nous avons un code qui rend l'image à moitié transparente 

var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload  = function() {
   c.drawImage(img, 0, 0);
   var ImageData = c.getImageData(0,0,img.width,img.height);
   for(var i=0;i<img.height;i++)
      for(var j=0;j<img.width;j++)
         ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
   c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';

, vous pouvez Vous rendre propre "shaders" - voir plein de MDN article ici

11
répondu Soul_man 2016-01-24 23:18:31

vous pouvez. La toile transparente peut être rapidement fanée en utilisant destination-out Global composite operation. Il n'est pas parfait à 100%, il laisse parfois des traces, mais il peut être modifié, en fonction de ce qui est nécessaire (c'est-à-dire utiliser 'source-over' et le remplir de couleur blanche avec alpha à 0,13, puis s'estomper pour préparer la toile). 

// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';
7
répondu Og2t 2012-10-29 09:55:37

Si vous utilisez jCanvas de la bibliothèque, vous pouvez utiliser le bouton opacité propriété lors de l'élaboration. Si vous avez besoin de l'effet fade en plus de cela, il suffit de redessiner avec des valeurs différentes.

-2
répondu cen 2014-11-09 00:06:44

vous ne pouvez pas. C'est le mode immédiat. Mais vous pouvez en quelque sorte le simuler en dessinant un rectangle au-dessus de lui dans la couleur de fond avec une opacité.

Si l'image est plus autre chose qu'une couleur constante, alors il devient un peu plus compliqué. Vous devriez être en mesure d'utiliser les méthodes de manipulation de pixels dans ce cas. Il suffit de sauvegarder la zone avant de dessiner l'image, puis de la mélanger de nouveau sur le dessus avec une opacité après.

-11
répondu MPG 2010-03-16 18:47:15