HTML5 -Tutorial: Canvas -Tag zeichnet lineare Gradientengradientengrafiken

Artikeleinführung von Wulin.com (www.vevb.com): Die Anwendung von HTML5 Daily Training Canvas -Tag - Zeichnen linearer Gradientengrafiken.

Bisher wurde das Grundwissen über das Zeichnen von Grafiken mithilfe von Leinwand eingeführt. Ab diesem Abschnitt werden wir eines der anderen fortgeschritteneren Zeichnungswissen vorstellen - linearer Gradienten. Lassen Sie uns zunächst die in "HTML5 Daily Practice: Anwendung von Canvas -Tags - Zeichnen von Rechtecken zeichnen - Rechtecken" HTML5 -Praxis "überprüfen. Beim Zeichnen eines linearen Gradienten müssen wir ein neues Objekt verwenden - das lineargradientierte Objekt, und die CreateLinearGroorgradiend -Methode des Graph Context -Objekts zum Erstellen des Objekts verwenden. Die Definition dieser Methode lautet wie folgt:

context.createlineargradient (xstart, ystart, Xend, Yend);

XStart: Die horizontale Achse des Gradientenstartpunkts

YStart: Die vertikale Koordinate des Gradientenstartpunkts

XEND: Horizontale Endpunkt -Endpunkt -Achse

Hebe: die vertikale Koordinate des Gradientenendpunkts

Durch die Verwendung dieser Methode wird ein lineares Gradearient -Objekt unter Verwendung von zwei Koordinatenpunkten erstellt. Wie sollte die Gradientenfarbe eingestellt werden?

Nachdem wir das lineargradientierte Objekt übergeben haben, verwenden wir die AddColorStop -Methode, um es festzulegen. Das Beispiel dieser Methode lautet wie folgt:

context.addcolorstop (offset, color);

Verwenden Sie diese Methode, um die Farbe des Gradienten anzuhängen, der zwei Parameter enthält:

Offset: Ist der Offset der schwimmenden Punktzahl zwischen 0-1 der Farbe, die den Gradienten-Startpunkt verlässt, wodurch die Farbe vom Anfangspunkt des Gradienten auf den Offset setzt.

Farbe: Ist die Farbe, die zum Einstellen der Zeichnung verwendet wird

Abbildung des Offset -Parameters in der AddColorStop -Methode