Canvas-Farbverläufe
HTML5-Canvas-Farbverläufe sind Farbmuster zum Füllen von Kreisen, Rechtecken, Linien und Text. Lineare, radiale und konische Verläufe.
Ein Farbverlauf ist allgemein ein Muster, bei dem eine Farbe gleichmäßig in eine andere übergeht. HTML5-Canvas-Farbverläufe ermöglichen es, Formen — Kreise, Rechtecke, Linien, Text, beliebige Pfade — mit dieser Art von Mehrfarben-Überblendung anstelle einer einzelnen Volltonfarbe zu füllen oder zu umranden.
Dieses Kapitel behandelt die drei Verlaufstypen, die Sie in einem 2D-Canvas-Kontext erstellen können, wie die Koordinatenparameter Richtung und Größe steuern, wie addColorStop() Farben entlang des Verlaufs platziert, sowie mehrere ausführbare Beispiele (vertikal, diagonal, Text-/Pfadfüllungen und ein radiales Leuchten). Wenn Sie neu mit der Canvas-API sind, beginnen Sie mit der HTML5-Canvas-Einführung, dann mit dem Zeichnen von Formen und Pfaden und lesen Sie, wie das Canvas-Koordinatensystem funktioniert.
Wie Canvas-Farbverläufe funktionieren
Die Arbeit mit einem Farbverlauf folgt immer denselben vier Schritten:
- Erstellen Sie ein Verlaufsobjekt mit einer der Factory-Methoden des Kontexts:
ctx.createLinearGradient(x0, y0, x1, y1)— ein linearer (gerichteter) Farbverlauf.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)— ein radialer (kreisförmiger) Farbverlauf.ctx.createConicGradient(startAngle, x, y)— ein konischer (winkelsweepender) Farbverlauf.
- Fügen Sie zwei oder mehr Farbstopps hinzu mit
gradient.addColorStop(offset, color). - Weisen Sie den Farbverlauf
ctx.fillStyleoderctx.strokeStylezu. - Zeichnen Sie eine Form (
fillRect,fill,stroke,fillText, …). Der Farbverlauf wird überall dort abgetastet, wo Sie zeichnen.
Ein wichtiger Punkt: Verlaufskoordinaten befinden sich im Canvas-Koordinatenraum (absolut), nicht relativ zu der Form, die Sie füllen. Ein von (0, 0) bis (300, 0) erstellter Farbverlauf überspannt immer diesen Bereich des Canvas. Wenn Sie ein Rechteck außerhalb dieses Bereichs zeichnen, nimmt es die erste oder letzte Farbe des Verlaufs an (je nachdem, welche näher liegt), da die Farben vor Offset 0 und nach Offset 1 festgehalten werden.
addColorStop(): Farben platzieren
gradient.addColorStop(offset, color) fügt dem Farbverlauf einen Farbstopp hinzu.
offset— eine Zahl zwischen0.0(dem Anfang des Farbverlaufs) und1.0(dem Ende). Werte außerhalb dieses Bereichs lösen einen Fehler aus.color— jeder CSS-Farbstring: ein Name ("green"), Hexadezimalwert ("#14389c"),rgb()/rgba()oderhsl(). Verwenden Sie den Alphakanal (rgba(...)) für transparente Stopps.
Sie benötigen mindestens zwei Stopps für eine sichtbare Überblendung. Der Offset jedes Stopps bestimmt, wo der Übergang stattfindet — je kleiner der Abstand zwischen zwei Offsets, desto schärfer ist der Farbwechsel zwischen ihnen. Gleichmäßige Abstände ergeben eine gleichmäßige Überblendung; eng beieinanderliegende Offsets erzeugen harte Bänder.
<!DOCTYPE html>
<html>
<head>
<title>Three color stops</title>
<style>
canvas { border: 1px solid #cccccc; }
</style>
</head>
<body>
<canvas id="stopsCanvas" width="300" height="120"></canvas>
<script>
const ctx = document.getElementById("stopsCanvas").getContext("2d");
const grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "red"); // start
grd.addColorStop(0.5, "yellow"); // exact middle
grd.addColorStop(1, "green"); // end
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 120);
</script>
</body>
</html>Verschieben Sie den mittleren Stopp von 0.5 auf 0.85, und das gelbe Band verschiebt sich weit nach rechts, sodass der größte Teil des Balkens eine Rot-zu-Gelb-Überblendung bleibt — das ist der Offset, der die Platzierung steuert.
Linearer Farbverlauf
ctx.createLinearGradient(x0, y0, x1, y1) gibt einen Farbverlauf zurück, dessen Farbe sich entlang einer geraden Linie ändert — den Verlaufsvektor, der vom Startpunkt (x0, y0) zum Endpunkt (x1, y1) verläuft:
x0, y0— der Startpunkt des Farbverlaufs. Der Farbstopp bei Offset0wird hier gezeichnet.x1, y1— der Endpunkt des Farbverlaufs. Der Farbstopp bei Offset1wird hier gezeichnet.
Die Richtung der Linie zwischen diesen beiden Punkten legt die Richtung des Farbverlaufs fest, und der Abstand zwischen ihnen bestimmt, wie weit sich die Überblendung erstreckt. Senkrecht zum Vektor gezogene Linien sind eine einzelne Volltonfarbe.
- Ein horizontaler Farbverlauf hält
ygleich:createLinearGradient(0, 0, 300, 0). - Ein vertikaler Farbverlauf hält
xgleich:createLinearGradient(0, 0, 0, 200). - Ein diagonaler Farbverlauf ändert beides:
createLinearGradient(0, 0, 300, 200).
Denken Sie an das Canvas-Koordinatensystem: (0, 0) ist die obere linke Ecke, x nimmt nach rechts zu und y nimmt nach unten zu.
Beispiel eines horizontalen linearen Farbverlaufs mit fillStyle
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150">
Your browser doesn't support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "green");
grd.addColorStop(1, "whitesmoke");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 260, 110);
</script>
</body>
</html>Da der Vektor von (0, 0) nach (300, 0) verläuft, ist die Überblendung rein horizontal: die linke Kante ist grün und die rechte Kante ist whitesmoke.
Beispiel eines vertikalen linearen Farbverlaufs
Halten Sie x in beiden Punkten gleich (hier 0) und ändern Sie nur y, um eine Überblendung von oben nach unten zu erzielen:
<!DOCTYPE html>
<html>
<head>
<title>Vertical gradient</title>
<style>
canvas { border: 1px solid #cccccc; }
</style>
</head>
<body>
<canvas id="verticalCanvas" width="300" height="200"></canvas>
<script>
const ctx = document.getElementById("verticalCanvas").getContext("2d");
// Same x (0), different y → top-to-bottom blend.
const grd = ctx.createLinearGradient(0, 0, 0, 200);
grd.addColorStop(0, "#1e3c72"); // top
grd.addColorStop(1, "#2a5298"); // bottom
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>Beispiel eines diagonalen linearen Farbverlaufs
Ändern Sie sowohl x als auch y, damit der Vektor von Ecke zu Ecke verläuft:
<!DOCTYPE html>
<html>
<head>
<title>Diagonal gradient</title>
<style>
canvas { border: 1px solid #cccccc; }
</style>
</head>
<body>
<canvas id="diagonalCanvas" width="300" height="200"></canvas>
<script>
const ctx = document.getElementById("diagonalCanvas").getContext("2d");
// Vector from the top-left corner to the bottom-right corner.
const grd = ctx.createLinearGradient(0, 0, 300, 200);
grd.addColorStop(0, "#ff512f");
grd.addColorStop(0.5, "#f09819");
grd.addColorStop(1, "#ffd452");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>Beispiel eines linearen Farbverlaufs mit fillStyle und verschiedenen Farben:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 2px solid #202131;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('exampleCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, 500, 200);
var linear = context.createLinearGradient(0, 0, 500, 200);
linear.addColorStop(0, '#297979');
linear.addColorStop(1, '#2ee035');
context.fillStyle = linear;
context.fill();
</script>
</body>
</html>Beispiel eines linearen Farbverlaufs mit fillStyle und strokeStyle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 5px solid #cccccc;
}
</style>
<script>
function drawShape() {
var canvas = document.getElementById('canvasGradient');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var lgrad1 = ctx.createLinearGradient(0, 0, 0, 300);
lgrad1.addColorStop(0, 'blue');
lgrad1.addColorStop(0.4, 'lightpink');
lgrad1.addColorStop(0.5, 'purple');
lgrad1.addColorStop(1, 'lightsalmon');
var lgrad2 = ctx.createLinearGradient(0, 50, 0, 150);
lgrad2.addColorStop(0, '#7afff3');
lgrad2.addColorStop(0.5, '#191918');
lgrad2.addColorStop(1, '#7afff3');
ctx.fillStyle = lgrad1;
ctx.strokeStyle = lgrad2;
ctx.fillRect(15, 15, 120, 120);
ctx.strokeRect(100, 50, 100, 50);
} else {
alert('Your browser does not support');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="canvasGradient" width="300" height="300"></canvas>
</body>
</html>Beispiel eines Farbverlaufs auf Text und einem Pfad
Ein Farbverlauf ist nicht auf Rechtecke beschränkt — er funktioniert mit jeder Füllung oder Kontur, einschließlich Text und benutzerdefinierten Pfaden. Setzen Sie ihn als fillStyle vor fillText() (siehe Text auf dem Canvas zeichnen) oder vor fill()/stroke() auf einem selbst erstellten Pfad (siehe Auf dem Canvas zeichnen).
<!DOCTYPE html>
<html>
<head>
<title>Gradient text and path</title>
<style>
canvas { border: 1px solid #cccccc; }
</style>
</head>
<body>
<canvas id="textCanvas" width="400" height="160"></canvas>
<script>
const ctx = document.getElementById("textCanvas").getContext("2d");
// A gradient spanning the canvas width.
const grd = ctx.createLinearGradient(0, 0, 400, 0);
grd.addColorStop(0, "#8e2de2");
grd.addColorStop(1, "#4a00e0");
// Fill text with the gradient.
ctx.font = "bold 48px sans-serif";
ctx.fillStyle = grd;
ctx.fillText("Gradient", 30, 70);
// Stroke a triangular path with the same gradient.
ctx.beginPath();
ctx.moveTo(40, 100);
ctx.lineTo(360, 100);
ctx.lineTo(200, 145);
ctx.closePath();
ctx.lineWidth = 6;
ctx.strokeStyle = grd;
ctx.stroke();
</script>
</body>
</html>Radialer Farbverlauf
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) definiert einen Farbverlauf zwischen zwei Kreisen. Die Farbe blendet vom Startkreis nach außen zum Endkreis über:
x0, y0, r0— der Mittelpunkt(x0, y0)und Radiusr0des Startkreises (innen). Der Farbstopp bei Offset0füllt diesen Kreis.x1, y1, r1— der Mittelpunkt(x1, y1)und Radiusr1des Endkreises (außen). Der Farbstopp bei Offset1wird am Rand dieses Kreises erreicht.
Wenn beide Kreise denselben Mittelpunkt teilen, entsteht ein perfekt konzentrisches Leuchten. Wenn der Mittelpunkt des inneren Kreises vom äußeren versetzt ist, verschiebt sich der helle Punkt zur einen Seite — genau so simuliert man eine Lichtquelle oder einen glänzenden Reflex (das folgende Beispiel verwendet versetzte Mittelpunkte). Ein r0 größer als 0 erzeugt einen soliden Kern der ersten Farbe, bevor die Überblendung beginnt.
Beispiel eines radialen Farbverlaufs mit versetzten Mittelpunkten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 2px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150">
Your browser doesn't support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(155, 80, 20, 130, 40, 190);
grd.addColorStop(0, "#14389c");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(15, 15, 270, 120);
</script>
</body>
</html>Hier ist der innere Kreis bei (155, 80) mit Radius 20 zentriert, während der äußere Kreis bei (130, 40) mit Radius 190 zentriert ist. Da die Mittelpunkte unterschiedlich sind, sitzt der dunkelblau Kern eher unten rechts und verblasst außermittig zu Weiß, was der Füllung einen dreidimensionalen, von einer Seite beleuchteten Eindruck verleiht.
Beispiel eines radialen Leuchteffekts
Ein kleiner, vollständig transparenter äußerer Stopp über einem transparenten Canvas-Bereich erzeugt ein weiches Leuchten, das Sie über andere Zeichnungen legen können. Beachten Sie die Verwendung von rgba(), damit der Rand zu nichts anstatt zu Weiß verblasst:
<!DOCTYPE html>
<html>
<head>
<title>Radial glow</title>
<style>
canvas { border: 1px solid #cccccc; background: #11131f; }
</style>
</head>
<body>
<canvas id="glowCanvas" width="300" height="200"></canvas>
<script>
const ctx = document.getElementById("glowCanvas").getContext("2d");
// Concentric circles: solid core at (150,100), fading out to radius 110.
const grd = ctx.createRadialGradient(150, 100, 5, 150, 100, 110);
grd.addColorStop(0, "rgba(255, 214, 102, 1)"); // bright core
grd.addColorStop(0.4, "rgba(255, 154, 0, 0.6)"); // warm mid
grd.addColorStop(1, "rgba(255, 154, 0, 0)"); // transparent edge
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>Konischer Farbverlauf
ctx.createConicGradient(startAngle, x, y) erstellt einen Farbverlauf, der die Farben um einen Mittelpunkt herum schwenkt, wie ein Farbrad oder ein Kreisdiagramm, anstatt entlang einer Linie oder zwischen Kreisen:
startAngle— der Winkel in Bogenmaß, bei dem Offset0beginnt, gemessen im Uhrzeigersinn von der positiven x-Achse.x, y— der Mittelpunkt der Rotation.
Farbstopps werden über die volle Umdrehung verteilt, sodass Offset 0 und Offset 1 wieder bei startAngle zusammentreffen. Um eine sichtbare Naht zu vermeiden, geben Sie dem ersten und letzten Stopp dieselbe Farbe.
<!DOCTYPE html>
<html>
<head>
<title>Conic gradient</title>
<style>
canvas { border: 1px solid #cccccc; }
</style>
</head>
<body>
<canvas id="conicCanvas" width="200" height="200"></canvas>
<script>
const ctx = document.getElementById("conicCanvas").getContext("2d");
// Sweep starting at the top (-90° = -Math.PI/2), centered at (100,100).
const grd = ctx.createConicGradient(-Math.PI / 2, 100, 100);
grd.addColorStop(0, "red");
grd.addColorStop(0.25, "yellow");
grd.addColorStop(0.5, "lime");
grd.addColorStop(0.75, "blue");
grd.addColorStop(1, "red"); // matches stop 0 → seamless wheel
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 200);
</script>
</body>
</html>createConicGradient() wird in aktuellen Versionen aller gängigen Browser (Chrome, Edge, Firefox und Safari) unterstützt. Stellen Sie eine Fallback-Volltonfarbe für sehr alte Browser bereit, falls Sie diese unterstützen müssen.