Vorläufige Studiennotizen zu Html5 Canvas (9) – Farbverlauf

In diesem Artikel wird weiterhin der Zeicheneffekt von html5 vorgestellt. Anders als in der vorherigen Einführung handelt es sich bei dem in diesem Artikel eingeführten Farbverlauf nicht um den zuvor eingeführten fillStyle Ein Wert von. Schauen wir uns zunächst ein Beispiel an:

Der Code lautet wie folgt:

var gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

Dies ist ein linearer Farbverlauf. Erstellen Sie zunächst einen linearen Farbverlauf durch createLinearGradient Fügen Sie dann den beiden Punkten Farbwerte hinzu, addColorStops 0 ist der Startpunkt, 1 ist der Endpunkt und der zweite Parameter ist die Farbe, die rgb oder rgba.

Der vorherige ist ein linearer Farbverlauf und ein Bogengradient. Der Effekt ist wie folgt:

Der Code lautet wie folgt:

var gradient = context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

createRadialGradient

Die ersten drei Parameter sind die horizontalen und vertikalen Koordinaten des Mittelpunkts des Startkreises und der Radius des Kreises. Die letzten drei Parameter lauten wie folgt: die Mittelpunktskoordinaten des Endpunktkreises und der Radius des Kreises.

Verwenden Sie einen kreisförmigen Farbverlauf, um einen Farbverlauf ausgehend von der Mitte zu zeichnen. Der Effekt ist wie folgt folgt:

Der Code lautet wie folgt:

var gradient = context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

Der Ausgangspunkt und der Endpunkt sind die Mittelpunkte der Quadrate mit unterschiedlichen Radien. Dieser Effekt kann erzeugt werden.

Das Obige ist der Inhalt von Html5 Canvas Preliminary Study Notes (9) – Farbverlauf. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!