Le remplissage progressif et la transparence du canevas HTML5 réalisent l'effet de masque d'image

Cet article vous donnera une introduction détaillée au réglage et à l'utilisation de la transparence dans Canvas. Il combine le remplissage progressif et la prise en charge de la transparence pour obtenir l'effet Masque de l'image. La démonstration du code de la méthode progressive linéaire est la suivante. les amis peuvent s'y référer. J'espère que cela vous sera utile. Tout le monde est utile

Expliquez en détail le paramétrage et l'utilisation du remplissage progressif dans HTML5 Canvas, le paramétrage et l'utilisation de la transparence dans Canvas, et combinez-le. le remplissage progressif et le support de la transparence pour obtenir l'effet Masque de l'image.

1 : Remplissage dégradé (Remplissage dégradé)
Canvas prend en charge deux méthodes de remplissage progressif, l'une est Remplissage dégradé de ligne (Remplissage dégradé de ligne) et l'autre s'appelle
Il est le remplissage RadialGradient. Les API sont :
createLinearGradient(x1, y1, x2, y2);
où x1, y1 sont les coordonnées du premier point et x2, y2 sont les coordonnées du deuxième point.
createRadialGradient(x1, y1, r1, x2, y2, r2);
où x1, y1 sont les coordonnées du premier point central, r1 est le rayon, x2, y2 sont les coordonnées du deuxième point central , et r2 est le rayon.
Définissez la couleur pour chaque point
addColorStop(position, color);
où position représente la position, la plage de taille [0~1], 0 représente le premier point, 1 représente la coordonnée du second point
Color représente la valeur de couleur, n'importe quelle valeur de couleur CSS.
Une fois l'objet de remplissage progressif créé et configuré, il peut être utilisé pour définir le StrokeStyle et le fillStyle du contexte pour implémenter le texte,
Remplissage progressif des couleurs des formes géométriques.

Démonstration de code de la méthode de dégradé linéaire :

1. Dégradé de couleur dans la direction verticale (Y)

// vertical/Y direction 
var lineGradient = ctx.createLinearGradient (50, 0, 50, 200); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

2. Dégradé de couleur dans la direction horizontale (X)

// horizontal/X direction 
var lineGradient = ctx.createLinearGradient (0, 50, 200, 50); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

3.

// vertical and horizontal direction 
var lineGradient = ctx.createLinearGradient (0, 0, 200, 200); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

2 : Transparence (Transparent)
La transparence dans Canvas prend en charge les paramètres de transparence globaux et locaux. be Ceci est réalisé en définissant
Context.globalAlpha. La transparence locale peut être obtenue en définissant le canal de valeur alpha
dans la valeur de couleur via fillStyle. Les codes pour les deux méthodes sont les suivants :

// change global alpha value 
ctx.globalAlpha=0.5; 
ctx.fillRect(50,50,75,50);

// change fill style color's alphachannel 
ctx.fillStyle = 'rgba(225,225,225,0.5)'; 
ctx.fillRect(50,50,75,50);

Les deux effets sont les mêmes.

3 : Effet de masque dégradé transparent photo

Utilisez des dégradés de couleurs radiaux et des changements de transparence pour obtenir un effet de masque translucide sur l'image, effet d'exécution de script :

var myImage = document.createElement('img'); 
myImage.src = "../test.png"; 
myImage.onload = function() { 
ctx.drawImage(myImage, 80, 30, myImage.naturalWidth, myImage.naturalHeight); 
var radialGradient = ctx.createRadialGradient (canvas.width/2, canvas.height/2, 10, canvas.width/2, canvas.height/2, 200); 
radialGradient.addColorStop(0, 'rgba(247, 247, 247, 0)'); 
radialGradient.addColorStop(0.7, 'rgba(120, 120, 120, 0.5)'); 
radialGradient.addColorStop(0.9, 'rgba(0, 0, 0, 0.8)'); 
radialGradient.addColorStop(1, 'rgba(238, 238, 238, 1)'); 
ctx.beginPath(); 
ctx.arc(canvas.width/2, canvas.height/2, 300, 0, Math.PI * 2, true); 
ctx.closePath(); 
ctx.fillStyle = radialGradient; 
ctx.fill(); 
}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!