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 < sein kann 🎜>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);
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);