Canvas-Verläufe
Ein Verlauf ist im Allgemeinen ein Farbmuster, das von einer Farbe zur anderen übergeht. HTML5-Canvas-Verläufe sind Farbmuster, die zum Füllen von Kreisen, Rechtecken, Linien, Text usw. verwendet werden, und Canvas-Formen sind nicht auf einfarbige Füllungen beschränkt.
Es gibt zwei Arten von Verläufen:
- createLinearGradient(x,y,x1,y1) - zum Erstellen eines linearen Verlaufs
- createRadialGradient(x,y,r,x1,y1,r1) - zum Erstellen eines radialen Verlaufs
Sobald Sie ein Verlauf-Objekt haben, fügen Sie zwei oder mehr Farbverlaufstopps hinzu. Um die Farbverlaufstopps und die Position entlang des Verlaufs zu definieren, wird die Methode addColorStop() verwendet. Die Positionen des Verlaufs können im Bereich zwischen 0 und 1 liegen.
Legen Sie anschließend die Eigenschaft fillStyle oder strokeStyle auf den Verlauf fest und zeichnen Sie die Form.
Linearer Verlauf
Der lineare Verlauf ändert die Farbe in einem linearen Muster, das die Richtung des Verlaufs definiert (horizontal, vertikal oder diagonal). Die vier Parameter dieser Funktion (x,y,x1,y1) definieren die Richtung und Ausdehnung des Verlaufs. Hinweis: Canvas-Koordinaten beginnen bei (0,0) in der oberen linken Ecke, wobei x nach rechts und y nach unten zunimmt.
Beispiel für einen linearen Verlauf 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>Beispiel für einen linearen Verlauf 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 für einen linearen Verlauf 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>Radialer Verlauf
Der radiale Verlauf ändert die Farbe in einem kreisförmigen Muster. Er kann mit zwei angegebenen Kreisen erstellt werden. Mit anderen Worten ist der radiale Verlauf ein Farbmuster, das sich kreisförmig von einer inneren Farbe zu einer oder mehreren anderen Farben erstreckt. Dies kann mit zwei Kreisen erreicht werden, von denen jeder einen Mittelpunkt und einen Radius haben muss.
Beispiel für einen radialen Verlauf:
<!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>Practice
Welche dieser Methoden werden verwendet, um Farben, Muster und Verläufe auf die auf dem HTML5-Canvas gezeichneten Formen anzuwenden?