Canvas globalCompositeOperation

Par défaut, si un objet (source) est dessiné sur un autre objet (cible) dans Canvas, le navigateur superposera simplement l'image de l'objet source sur l'image de l'objet cible.

Pour faire simple, dans Canvas, en combinant l'image source et l'image cible via globalCompositeOperation dans Canvas, vous pouvez obtenir différents effets, comme la figure suivante :

Comme le montre l'image ci-dessus, la pomme rouge et le cercle noir se transforment en pomme rouge mordue via destination-out de globalCompositeOperation . En d’autres termes, grâce à la synthèse d’images dans Canvas, nous pouvons obtenir des effets uniques, comme par exemple créer un effet de loterie de cartes à gratter. Aujourd'hui, nous allons apprendre à utiliser la synthèse d'images dans Canvas.

Il existe un total de 26 types de valeurs pour l'attribut globalCompositeOperation dans Canvas. Bien sûr, vous constaterez peut-être que les effets seront différents et certains effets peuvent ne pas être rendus normalement dans le navigateur. Mais peu importe, comprenons simplement la signification et les effets de ces 26 types.

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'rouge'; ctx.beginPath(); ctx.arc(-40, 20, 80, 0, Math.PI * 2, vrai); ctx.closePath(); ctx.fill();

Le code ci-dessus dessinera un cercle rouge d'un rayon de 80px sur le canevas Canvas, qui est appelé ici la source de l'image.

 ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.fill(); ctx.restore ();

Ce code dessinera un cercle orange d'un rayon de 80px sur le canevas Canvas, appelé ici cible de l'image. En définissant la valeur de globalCompositeOperation entre l'image source et l'image cible, l'opération de synthèse d'image peut être complétée :

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'rouge'; ctx.beginPath(); ctx.arc(-40, 20, 80, 0, Math.PI * 2, vrai); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, true); (); ctx.restore();

L'effet obtenu à ce moment est le suivant :

source-over est la valeur par défaut de la propriété globalCompositeOperation . Le graphique source recouvre le graphique cible. Le graphique source est affiché dans les parties opaques du graphique source et le graphique cible est affiché dans le reste.

source-in : Seules les parties du graphique cible et du graphique source qui se chevauchent et sont opaques sont dessinées.

source-out : La partie qui ne se chevauche pas du graphique cible et du graphique source sera dessinée.

source-atop : les graphiques cibles dans la partie superposée du contenu des graphiques cibles et les graphiques sources seront dessinés.

destination-over : les graphiques de destination derrière les graphiques de destination et le contenu graphique source seront dessinés.

destination-in : La partie superposée du graphique de destination et du graphique source sera conservée (graphique source), et le reste sera affiché de manière transparente

Les autres ne seront pas présentés un à un. La description spécifique correspondant à chaque valeur peut être trouvée ici.

Il existe deux propriétés globalAlpha et globalCompositeOperation dans Canvas pour contrôler les opérations de synthèse d'images :

• globalAlpha : Définit la transparence de l'image. La propriété globalAlpha a la valeur par défaut 1 , indiquant une opacité totale, et peut être définie entre 0 (entièrement transparent) et 1 (entièrement opaque). Cette valeur doit être définie avant que le graphique ne soit dessiné
• globalCompositeOperation : la valeur de cet attribut contrôle le dessin des graphiques dans le bitmap Canvas actuel une fois que globalAlpha et toutes les transformations ont pris effet.

Dans notre travail quotidien, nous constatons souvent des effets de loterie tels que les cartes à gratter. Si nous utilisons Canvas pour le faire, nous utiliserons la synthèse d'images Canvas.

 <div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>

Nous affichons le prix (s'il s'agit d'une image) comme arrière-plan de div#card . Ensuite, dessinez d'abord un rectangle gris (image source) dans Canvas, puis dessinez dynamiquement une nouvelle image via des événements de souris (ou des événements tactiles) (cela est similaire à un pinceau) et définissez la valeur de globalCompositeOperation sur destination-out (nouveau draw Les parties non superposées des graphiques et le contenu graphique qui existe déjà dans le canevas cible seront conservés). Lorsque l'effacement du pinceau est supérieur à une certaine proportion, supprimez l'élément <canvas> ou utilisez clearRect() pour effacer le canevas Canvas. pour afficher l'arrière-plan div

Dans cet article, nous présentons principalement la synthèse d'image de Canvas.Dans Canvas, l'opération de synthèse d'image peut être contrôlée via deux attributs, globalAlpha et globalCompositeOperation, pour obtenir l'effet de synthèse d'image. J'espère que cela sera utile à l'apprentissage de chacun, et j'espère également que tout le monde soutiendra le réseau VeVb Wulin.