HTML5 Canvas progressive Füllung und Transparenz, um Bildmaskeneffekt_html5-Tutorialfähigkeiten zu erreichen

Erläutern Sie ausführlich die Parametereinstellung und Verwendung der progressiven Füllung in HTML5 Canvas sowie die Einstellung und Verwendung der Transparenz in Canvas und kombinieren Sie die Unterstützung für progressive Füllung und Transparenz, um den Maskeneffekt des Bildes zu erzielen.

1: Verlaufsfüllung (Verlaufsfüllung)
Canvas unterstützt zwei progressive Füllmethoden, eine ist Linienverlaufsfüllung (Linienverlaufsfüllung) und die andere heißt
It ist RadialGradient Fill. Die APIs sind:
createLinearGradient(x1, y1, x2, y2);
wobei x1, y1 die Koordinaten des ersten Punkts und x2, y2 die Koordinaten des zweiten Punkts sind.
createRadialGradient(x1, y1, r1, x2, y2, r2);
wobei x1, y1 die Koordinaten des ersten Mittelpunkts sind, r1 der Radius, x2, y2 die Koordinaten des zweiten Mittelpunkts sind und r2 ist der Radius.
Legen Sie die Farbe für jeden Punkt fest
addColorStop(position, color);
wobei position die Position darstellt, der Größenbereich [0~1], 0 den ersten Punkt darstellt, 1 die Koordinate des zweiten darstellt Punkt
Farbe stellt den Farbwert dar, einen beliebigen CSS-Farbwert.
Nachdem das progressive Füllobjekt erstellt und konfiguriert wurde, kann es verwendet werden, um den StrokeStyle und den FillStyle des Kontexts festzulegen, um Text zu implementieren.
Allmähliche Farbfüllung geometrischer Formen.

Code-Demonstration der linearen Verlaufsmethode:
1. Farbverlauf in vertikaler (Y) Richtung

Kopieren Code

Der Code lautet wie folgt:

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

2. Farbverlauf in horizontaler (X) Richtung

Code kopieren

Der Code lautet wie folgt:

//horizontal/X Richtung

var lineGradient = ctx.createLinearGradient (0, 50, 200, 50);

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


3. Vertikaler und horizontaler Farbverlauf gleichzeitig (XY-Richtung)

Kopieren Sie den Code

Der Code lautet wie folgt:

// vertikale und horizontale Richtung var lineGradient = ctx.createLinearGradient (0, 0, 200, 200); lineGradient.addColorStop(0, 'rgba(255, 0, 1)'); lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); lineGradient;

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

2: Transparenz (Transparent)

Transparenz in Canvas unterstützt globale und lokale Transparenzeinstellungen. Globale Transparenzeinstellungen können durch die Einstellung
Context.globalAlpha erreicht werden. Lokale Transparenz kann erreicht werden, indem der Alphawertkanal

im Farbwert über fillStyle festgelegt wird. Die Codes für die beiden Methoden lauten wie folgt:
// globalen Alphawert ändern ctx.globalAlpha=0.5;
ctx.fillRect(50,50,75,50); // ändern Alphachannel der Füllstilfarbe
ctx.fillStyle = 'rgba(225,225,225,0.5)'; ctx.fillRect(50,50,75,50);
Die beiden Effekte sind gleich.


3: Transparenter Verlaufsmaskeneffekt für Fotos

Verwenden Sie einen radialen Farbverlauf und eine Änderung der Transparenz, um einen durchscheinenden Maskeneffekt auf dem Bild zu erzielen, Skriptlaufeffekt:





Code kopieren

Der Code lautet wie folgt:

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();
}