Kommentar: In diesem Artikel werden die Einstellungen und die Verwendung von Transparenz in Leinwand im Detail vorgestellt. Durch die Kombination der allmählichen Füllung und Transparenzunterstützung kann der Maskeneffekt des Bildes realisiert werden. Die Demonstration der linearen progressiven Methodencode lautet wie folgt. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Erläutern Sie die Parametereinstellungen und die Verwendung von progressiven Füllungen in HTML5 -Canvas ausführlich, die Einstellungen und die Verwendung der Transparenz in Leinwand in Kombination mit progressiver Füll- und Transparenzunterstützung, um den Bildmaskeneffekt zu erzielen.1: Gradientenfüllung
Canvas unterstützt zwei inkrementelle Füllmethoden, eine ist eine lineare inkrementelle Füllung (Leitungsgradientenfüllung) und der andere wird aufgerufen
Radialgradient Füllung. Ihre APIs sind:
kreatelineargradient (x1, y1, x2, y2);
wobei X1 und Y1 die Koordinaten des ersten Punktes und X2 und Y2 sind, sind die Koordinaten des zweiten Punkts.
Createuradialgradient (X1, Y1, R1, X2, Y2, R2);
Wobei X1 und Y1 die Koordinaten des ersten Mittelpunkts sind, ist R1 der Radius, X2 und Y2 die Koordinaten des zweiten Mittelpunkts und R2 der Radius.
Setzen Sie die Farbe für jeden Punkt
AddColorStop (Position, Farbe);
Wobei Position die Position darstellt, Größenbereich [0 ~ 1], wobei 0 den ersten Punkt darstellt, und 1 die Koordinaten des zweiten Punkts darstellt
Farbe repräsentiert den Farbwert, den Farbwert eines CSS.
Nachdem das progressive Füllobjekt erstellt und konfiguriert wurde, kann es verwendet werden, um den Textstrakestall- und Fillstyle -Implementierungstext des Kontextes festzulegen.
Progressive Farbfüllung von geometrischen Formen.
Codedemonstration eines linearen progressiven Ansatzes:
1. Farbe progressiv in vertikaler (y) Richtung
// vertikale/y Richtung
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. Horizontal (x) Richtungsfarbe -Fortschritt
// Horizontal/x Richtung
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. Vertikal und horizontal gleichzeitig (xy Richtung) Farbe progressiv
// vertikale und horizontale Richtung
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: transparent
Die Transparenzunterstützung in Leinwand ist in globale und lokale Transparenzeinstellungen unterteilt. Die Einstellungen der globalen Transparenz können durchgesetzt werden
Context.globalalpha wird implementiert. Lokale Transparenz kann durch Fillstyle auf den Alpha -Wertkanal im Farbwert eingestellt werden
Es zu erreichen. Die beiden Codemethoden sind wie folgt:
// den globalen Alpha -Wert ändern
ctx.globalalpha = 0,5;
CTX.FillRect (50,50,75,50);
// Alphachannel von Füllstil -Farbe ändern
Ctx.FillStyle = 'RGBA (225,225,225,0,5)';
CTX.FillRect (50,50,75,50);
Die beiden Effekte sind gleich.
Drei: transparente und allmähliche Maskeneffekt von Fotos
Verwenden Sie radialen Farbgradienten und Transparenzänderungen, um den durchscheinenden Maskeneffekt auf das Bild und den Skript -Laufeffekt zu erzielen:
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 ();
}