Comment faire pour modifier l'opacité (alpha, transparence) d'un élément dans une toile d'élément, après qu'elle a été dessinée?

En utilisant le HTML5 <canvas> élément, je voudrais charger un fichier image (PNG, JPEG, etc.), dessiner sur la toile de manière totalement transparente, et puis en fondu. J'ai compris comment faire pour charger l'image et le dessiner sur la toile, mais je ne sais pas comment modifier son opacité, une fois qu'il a été établi.

Voici le code que j'ai pour l'instant:

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 fonction à appeler qui va changer l'opacité?

InformationsquelleAutor Joe Lencioni | 2010-03-01
  1. 287

    Je suis également à la recherche d'une réponse à cette question, (pour être clair, je veux être en mesure de dessiner une image de l'utilisateur définit l'opacité comme la façon dont vous pouvez dessiner des formes avec l'opacité) si vous dessinez avec des formes primitives, vous pouvez définir le fond et le contour de la couleur avec alpha pour définir la transparence. Aussi loin que j'ai conclu que le droit maintenant, cela ne semble pas affecter l'image de dessin. 

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

    J'ai conclu que la définition de la globalCompositeOperation fonctionne avec des images. 

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

    Je me demande si il y a une sorte de troisième voie de la définition de la couleur, de sorte que nous pouvons teinte des images et les rendre transparents facilement.

    EDIT:

    Après le creusement plus loin j'en ai conclu que vous pouvez définir la transparence d'une image, réglage de la globalAlpha paramètre AVANT de dessiner l'image:

    //works with images
ctx.globalAlpha = 0.5

    Si vous voulez obtenir un effet de fondu au fil du temps vous besoin d'une sorte de boucle qui modifie la valeur alpha, c'est assez facile, un moyen d'y parvenir c'est la setTimeout fonction, cherchez à créer une boucle à partir de laquelle vous souhaitez modifier l'alpha au fil du temps.

    • globalAlpha fonctionne parfaitement. Fait partie de la norme: whatwg.org/specs/web-apps/current-work/multipage/...
    • Pour être précis, ce n'est pas le canvas élément qui a le globalAlpha de la propriété, mais le contexte que vous obtenez à partir de la toile.
    • Ian commentaire ci-dessous sur ctx.save() et ctx.restore() empêche la globalAlpha d'affecter le reste de la toile.
    • Me semble plutôt que le contrôle de l'opacité de ce qui est dessiné sur la toile, il serait plus simple et de servir le but de simplement contrôler l'opacité de l'ensemble de la toile elle-même une fois que l'image est tiré (juste une fois). L'utilisation d'habitude CSS/style de méthodes pour ce faire (canvaselement.style.l'opacité='0.3', etc). Plus tard, avec CSS3 vous pouvez même passer de la boucle complètement et de laisser le navigateur de la poignée de la décoloration à la place (quelque chose comme la transition: NNNms opaciity ease-in-out), ou même animer la décoloration.
    • Changement global alpha vis des polices personnalisées btw. (Whyyyyyy)
    • Malheureusement, canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)"; ne fonctionne pas. La valeur doit être au format hexadécimal.
    • Oh... beaucoup de confusion. Oui, ça marche...
    • Avez-vous ou les docs de faire toutes ces conclusions que, vous avez conclu avec? 😀
    • merci pour global alpha édition, Il a été utilement pour moi

    InformationsquelleAutor djdolber
  2. 108

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

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

    Si vous avez besoin d' img à charger:

    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éfinir la 'src' dernier, afin de garantir que votre onload gestionnaire est appelé sur toutes les plateformes, même si l'image est déjà dans le cache.

    • Envelopper les changements des trucs comme globalAlpha entre un save et restore (en fait utiliser beaucoup), pour vous assurer de ne pas tabasser des paramètres à partir de l'étranger, notamment lorsque les bits de code de dessin va être appelé à partir d'événements.

    • globalAlpha sera flou de l'ensemble des images ou des dessins sur une toile, ce n'est pas ce que vous voulez.
    • non, globalAlpha n'est pas flou du tout. Il va définir l'alpha pour tous les ultérieure dessin (ça ne change rien, déjà établie), et c'est pourquoi dans l'exemple de code que j'ai l'envelopper dans save et restore, à la limite de ce qu'il s'applique.
    • pas sûr que le ctx.restore() permettra de restaurer globalAlpha vous pourriez aussi avoir besoin de le faire à la fin (j'ai eu au moins dans les versions antérieures de Chrome) ctx.globalAlpha = 1;
    • Si vous n'êtes pas sûr, vous devriez vérifier. Il doit avoir été un très vieux Chrome, il fonctionne sur toutes les plates-formes: jsfiddle.net/y0z9h9m7
    • merci - oui, vous avez raison. 🙂
    InformationsquelleAutor Ian
  3. 14

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

    C'est facile à faire. Essayez ce code, remplacement d' "ie.jpg" avec ce que l'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 globalAlpha propriété.

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

    InformationsquelleAutor james.garriss
  4. 11

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

    Vous pouvez manipuler directement les données de pixels toiles au niveau de l'octet

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

    getImageData utilisation de fonction:

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

    et putImageData syntaxe:

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

    Où contexte est votre toile contexte 2d

    De sorte à obtenir rouge, vert, bleu et alpha valeurs, nous allons effectuer les opérations suivantes:

    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

    Nous avons donc ayant le code de prise d'image semi-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 faire propre "shaders" - voir plein de MDN article ici

    InformationsquelleAutor Soul_man
  5. 7

    Vous le pouvez. Transparent toile peut être rapidement disparu en utilisant destination de sortie mondial composite de l'opération. Il n'est pas parfait à 100%, parfois, il laisse quelques traces, mais il pourrait être modifié, en fonction de ce qui est nécessaire (c'est à dire utiliser la "source-over" et le remplir avec la couleur blanche avec un alpha à 0,13, puis fondu 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';
    InformationsquelleAutor Og2t
  6. 1

    Je pense que cela répond à la question mieux, il fait des changements de la valeur alpha de quelque chose qui a été déjà établi. Peut-être que ce n'était pas une partie de l'api lorsque cette question a été posée.

    donné contexte 2d c.

    function reduceAlpha(x, y, w, h, dA) {
    var screenData = c.getImageData(x, y, w, h);
    for(let i = 3; i < screenData.data.length; i+=4){
    screenData.data[i] -= dA; //delta-Alpha
    }
    c.putImageData(screenData, x, y );
}
    InformationsquelleAutor Dillon
  7. -2

    Si vous utilisez jCanvas bibliothèque, vous pouvez utiliser l'opacité de propriété lors de l'élaboration. Si vous avez besoin d'effet de fondu sur le dessus de cela, il suffit de redessiner avec des valeurs différentes.

    InformationsquelleAutor cen
  8. -11

    Vous ne pouvez pas. C'est de graphiques en mode exécution. Mais vous pouvez les trier, de les simuler par un rectangle de la couleur d'arrière-plan 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 le pixel méthodes de manipulation dans ce cas. Il suffit d'enregistrer la zone avant de dessiner l'image, puis se fondent que sur le haut avec une opacité par la suite.

    • Ce n'est pas la bonne réponse, voir below
    • Vous avez raison, mais vous ne pouvez pas modifier l'opacité de l'un des éléments que vous avez dessiné sur la toile, vous pouvez modifier l'opacité de l'ensemble de la toile. Dans certains cas, cela peut être suffisant.
    • MPG - votre commentaire (le 11 Mai) est également faux. Vous pouvez modifier l'opacité de la toile, mais ce n'est pas ce que l'OP voulait, ni ce qui est suggéré dans les réponses ci-dessus.
    InformationsquelleAutor MPG