Remplissage progressif et transparence du canevas HTML5 pour obtenir l'effet de masque d'image_html5 compétences du didacticiel

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 remplissage progressif et la prise en charge 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 du code de la méthode du dégradé linéaire :
1. Dégradé de couleur dans la direction verticale (Y)

Copier Code

Le code est le suivant :

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

2. >

Copier le codeLe code est le suivant :

//horizontal/X direction

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


3. Progression des couleurs verticale et horizontale en même temps (direction XY)

Copiez le code

Le code est le suivant :

// direction verticale et horizontale var lineGradient = ctx.createLinearGradient (0, 0, 200, 200); lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); lineGradient;

ctx.fillRect(0, 0, 300, 300);

2 : Transparence (Transparent)

Transparence dans Canvas prend en charge les paramètres de transparence globaux et locaux. Les paramètres de transparence globale peuvent être obtenus 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 la valeur alpha globale ctx.globalAlpha=0.5
ctx.fillRect(50,50,75,50); canal alpha de la couleur du style de remplissage 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 le dégradé de couleur radial et le changement de transparence pour obtenir un effet de masque translucide sur l'image, effet d'exécution de script :





Copier le code

Le code est le suivant :

var monImage = document.createElement('img');
monImage.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();
}