Heim > Artikel > Web-Frontend > HTML-Canvas
HTML-Canvas
- WBOYOriginal
- 2024-09-04 16:39:45821Durchsuche
In diesem Artikel finden Sie eine Übersicht über HTML Canvas. Wie Sie bereits wissen, ist HTML eine Auszeichnungssprache. Um dem Besucher Informationen zu präsentieren, können Sie HTML schreiben und angeben, welcher Text angezeigt werden soll und wie er angezeigt wird, d. h. Schriftgröße, Farbe, Ausrichtung usw. Wenn Sie einer Seite visuelle Elemente hinzufügen möchten, müssen Sie einen Link erstellen und betten Sie Bilder in die Seite ein, die getrennt von der HTML-Datei auf Ihrem Host gespeichert werden.
Aber was ist, wenn Sie etwas auf die Seite zeichnen müssen?
Was ist HTML Canvas?
HTML-Canvas (verwendet über das
Syntax:
<canvas id="example" width="200" height="200"> <em>Content here</em> </canvas>
Sie können die Leinwandgröße über das Breiten- und Höhenattribut definieren; Im Tag kann auch eine Element-ID definiert werden, die es ermöglicht, CSS-Stile auf dem Canvas-Element zu verwenden. Im Folgenden finden Sie ein Beispiel dafür, wie Sie mit dem Canvas-Element ein Rechteck zeichnen können:
Code:
<html>
<head>
<style>
#examplecanvas{border:2px solid green;}
</style>
</head>
<body>
<canvas id = "examplecanvas" width = "500" height = "300"></canvas>
</body>
</html>
Ausgabe:
Beispiele für HTML-Canvas-Zeichnung
Da Sie nun gesehen haben, wie Sie mit dem Canvas-Element ein Rechteck zeichnen können, werfen wir einen Blick auf einige andere Objekte, die mit dem Element auf einem Browser-Ausgabebildschirm gezeichnet werden können.
1. Eine Linie auf einer Seite zeichnen
moveTo(), Stroke() und lineTo() sind Methoden, mit denen gerade Linien auf einer Webseite gezeichnet werden können. Wie Sie sich vorstellen können, gibt moveTo() die Position des Cursors im Elementraum an, und lineTo() ist die Methode, die den Endpunkt der Linie angibt. Der Stroke() macht die Linie sichtbar. Hier ist der Code als Referenz:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Line Example</title>
<style>
canvas {
border: 2px solid black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="400" height="300"></canvas>
</body>
</html>
Ausgabe:
2. Einen Kreis auf HTML Canvas zeichnen
Im Gegensatz zu Rechtecken gibt es in JavaScript keine bestimmte Methode zum Zeichnen eines Kreises. Stattdessen können wir die arc()-Methode verwenden, die zum Zeichnen von Bögen verwendet wird, um einen Kreis auf der Leinwand zu zeichnen. Um eine Leinwand mit einem Kreis darauf zu erhalten, können Sie Folgendes verwenden:
Syntax:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Hier ist ein Beispiel einer Seite mit einem Kreis:
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas with a circle</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="300"></canvas>
</body>
</html>
Ausgabe:
3. Einen Text im HTML-Canvas zeichnen
Text kann auch in einem HTML-Canvas gezeichnet werden. Um Text auf Ihre Leinwand zu bringen, können Sie die Methode filltext() verwenden. Im Folgenden sehen Sie ein Beispiel für eine HTML-Seite, die Text innerhalb eines Canvas-Elements enthält:
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas with text inside the element</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="200"></canvas>
</body>
</html>
Ausgabe:
4. Zeichnen eines Bogens innerhalb einer HTML-Leinwand
Wie wir mit einem Kreis besprochen haben, gibt es eine Methode namens arc(), die zum Zeichnen von Bögen in HTML Canvas verwendet wird. Hier ist die Syntax der Methode, bei der Sie lediglich Ihre Variable hinzufügen müssen:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Es folgt eine HTML-Seite, die einen Bogen innerhalb eines Canvas-Elements hat:
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arc inside an HTML Canvas</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="600" height="400"></canvas>
</body>
</html>
Ausgabe:
5. Zeichnen eines linearen oder kreisförmigen Farbverlaufs
Mit dieser Methode können Sie „createLienearGradient()“ erstellen, um Farbverläufe Ihrer Wahl innerhalb des Canvas-Elements zu zeichnen. Bei dieser Methode müssen Sie addColorStop() verwenden, um Verlaufsfarben zu kennzeichnen.
Syntax:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Hier ist eine Seite mit einem linearen Farbverlauf:
Code:
<html>
<body>
<canvas id="examplecanvas" width="400" height="200" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas.</canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,300,150);
</script>
</body>
</html>
Ausgabe:
In ähnlicher Weise ist die Methode zum Zeichnen kreisförmiger Farbverläufe createRadialGradient().
Syntax:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Code:
<html>
<body>
<canvas id="examplecanvas" width="200" height="100" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas. </canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80,50,10,100,50,90);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1,"yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
Ausgabe:
Fazit
Da Sie nun damit vertraut sind, was es ist und wie es auf Webseiten verwendet werden kann, sollten Sie sich in Ihren Webdesign-Fähigkeiten sicherer fühlen. Während in einigen Fällen Bilder verwendet werden können, besteht der Vorteil von HTML-Canvas darin, dass es skalierbar und in Bezug auf Größe und Verarbeitungsleistung viel leichter ist.
Das obige ist der detaillierte Inhalt vonHTML-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!