HTML-Canvas-Verläufe

Canvas - Verläufe

Verläufe können zum Füllen von Rechtecken, Kreisen, Linien, Texten und mehr verwendet werden. Die Shapes auf dem Canvas sind nicht auf reinen Farben beschränkt.

Es gibt zwei verschiedene Arten von Verläufen:

• createLinearGradient(x,y,x1,y1) - Erstellen Sie einen linearen Verlauf
• createRadialGradient(x,y,r,x1,y1,r1) - Erstellen Sie einen radialen/kreisförmigen Verlauf

Sobald wir das Verlaufobjekt haben, müssen wir zwei oder mehr Farbstopps hinzufügen.

Die Methode addColorStop() legt die Farbstopps und deren Position entlang des Verlaufs fest. Die Verlaufposition kann jeder Position zwischen 0 und 1 sein.

Um Verläufe zu verwenden, stellen Sie die fillStyle- oder strokeStyle-Eigenschaft auf den Verlauf ein und zeichnen Sie ein Shape (Rechteck, Text oder Linie) dann.

Verwenden Sie createLinearGradient()

Beispiel

Erstellen Sie einen linearen Verlauf. Füllen Sie ein Rechteck mit dem Verlauf:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Probieren Sie es selbst aus

Verwenden Sie createRadialGradient():

Beispiel

Erstellen Sie einen radialen/kreisförmigen Verlauf. Füllen Sie ein Rechteck mit dem Verlauf:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Probieren Sie es selbst aus

Weitere Informationen:

Vollständiges Canvas-Referenzhandbuch von CodeW3C.com