Commentaire: Cet article présentera en détail les paramètres et l'utilisation de la transparence dans Canvas. En combinant le remplissage progressif et le support de transparence, il peut réaliser l'effet du masque de l'image. La démonstration de code de méthode progressive linéaire est la suivante. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.
Expliquez les paramètres des paramètres et l'utilisation du remplissage progressif de la toile HTML5 en détail, les paramètres et l'utilisation de la transparence dans la toile, combinés avec un support de remplissage et de transparence progressif, pour réaliser l'effet du masque d'image.1: Remplissage du gradient
La toile prend en charge deux méthodes de remplissage incrémentielles, l'une est un remplissage incrémentiel linéaire (remplissage de gradient de ligne), et l'autre est appelé
Remplissage radialgradient. Leurs API sont:
CreateLineargradient (x1, y1, x2, y2);
où x1 et y1 sont les coordonnées du premier point et x2 et y2 sont les coordonnées du deuxième point.
Createradialgradient (x1, y1, r1, x2, y2, r2);
Lorsque X1 et Y1 sont les coordonnées du premier point central, R1 est le rayon, X2 et Y2 sont les coordonnées du deuxième point central, et R2 est le rayon.
Définir la couleur pour chaque point
addColOrStop (position, couleur);
Où la position représente la position, la plage de taille [0 ~ 1], où 0 représente le premier point, et 1 représente les coordonnées du deuxième point
La couleur représente la valeur de la couleur, la valeur de couleur de tout CSS.
Une fois l'objet de remplissage progressif créé et configuré, il peut être utilisé pour définir le texte de mise en œuvre du strokestyle et de la remplissage du contexte.
Remplissage de couleur progressive des formes géométriques.
Démonstration de code de l'approche progressive linéaire:
1. Couleur progressive dans la direction verticale (y)
// Direction verticale / y
var linegradient = ctx.CreateLlineargradient (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. Progression horizontale de la couleur de direction (X)
// Direction horizontale / x
var linegradient = ctx.CreateLlineargradient (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 et horizontal simultanément (direction XY) Couleur progressive
// Direction verticale et horizontale
var linegradient = ctx.CreateLlineargradient (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: transparent
Le support de transparence dans Canvas est divisé en paramètres de transparence globale et locale. Les paramètres de la transparence globale peuvent être définis à travers
Context.globalalpha est implémenté. La transparence locale peut être définie via FillStyle sur le canal de valeur alpha en valeur de couleur
Pour y parvenir. Les deux méthodes de code sont les suivantes:
// modifie la valeur alpha globale
ctx.globalalpha = 0,5;
CTX.Fillrect (50,50,75,50);
// Changer l'alphachannel de couleur de style remplissage
CTX.FillStyle = 'RGBA (225 225,225,0,5)';
CTX.Fillrect (50,50,75,50);
Les deux effets sont les mêmes.
Trois: Effet de masque transparent et progressif des photos
Utilisez des changements de gradient de couleur radiale et de transparence pour obtenir l'effet de masque translucide sur l'image, et l'effet d'exécution du 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.creareadialgradient (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.filstyle = radialgradient;
ctx.fill ();
}