Artikeleinführung von Wulin.com (www.vevb.com): Die Anwendung von HTML5 Daily Training Canvas -Tag - Zeichnen von Radialgradientengrafiken.
Wir haben gelernt, wie man lineare Gradientendiagramme mit Leinwand zeichnet, und heute lernen wir, wie man radiale Gradientendiagramme zeichnet. Durch die Untersuchung der vorherigen Klasse wissen wir, dass das Zeichnen linearer Gradientendiagramme eine sehr wichtige Funktion verwendet - createLineargradiend ();
Wenn wir einen radialen Gradienten zeichnen wollen, haben wir eine ähnliche Methode wie folgt:
XStart: Die horizontale Achse des Gradientenstartpunkts
YStart: Die vertikale Koordinate des Gradientenstartpunkts
XEND: Horizontale Endpunkt -Endpunkt -Achse
Hebe: die vertikale Koordinate des Gradientenendpunkts
Radiusstart: Der Radius des Kreises, der sich zu verändern beginnt
Radiusend: Der Radius des Kreises, der im Gradienten endet
Schließlich können wir einen sehr schönen Gradienten durch die addColorstop -Methode ziehen, die wir in der letzten Klasse gelernt haben. Es muss auch eine schwimmende Punktzahl zwischen 0-1 als Versatz des Gradientenwendepunkts festlegen.
Der gesamte Code -Fall ist der gleiche wie in der vorherigen Klasse, außer: