Einführung in HTML Canvas
In diesem Artikel sehen wir eine Gliederung auf HTML Canvas. Wie Sie bereits wissen, ist HTML eine Auszeichnungssprache. Um dem Besucher Informationen zu präsentieren, können Sie HTML-Code schreiben, der angibt, welcher Text auf dem Display angezeigt werden soll und wie er angezeigt wird, z. B. Schriftgröße, Farbe, Ausrichtung usw. Wenn Sie einer Seite Bilder hinzufügen möchten, müssen Sie einen Link erstellen und binden Sie Bilder in die Seite ein, die separat 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-Zeichenfläche (über Tag verwendet) ist ein HTML-Element, mit dem Grafiken (Linien, Balken, Diagramme usw.) direkt auf dem Computerbildschirm des Benutzers gezeichnet werden. Das canvas-Element ist nur ein Container für die Informationen, die Zeichnung erfolgt jedoch über JavaScript. Es wird von allen modernen Webbrowsern unterstützt, die HTML5 unterstützen und JavaScript rendern können. Das Erstellen einer HTML-Zeichenfläche ist sehr einfach und Sie können sie wie folgt zu jeder beliebigen HTML-Seite hinzufügen.
Syntax:
Content here
Sie können die Canvas-Größe über das width- und height-Attribut definieren. Außerdem kann im Tag eine Element-ID definiert werden, mit der CSS-Stile für das Canvas-Element verwendet werden können. Das folgende Beispiel zeigt, wie Sie mit dem Canvas-Element ein Rechteck zeichnen können:
Code:
#examplecanvas(border:2px solid green;)
Ausgabe:
Beispiele für HTML Canvas Drawing
Nachdem Sie 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. Zeichnen einer Linie auf einer Seite
moveTo (), stroke () und lineTo () sind Methoden zum Zeichnen gerader Linien auf einer Webseite. Wie Sie sich vorstellen können, gibt moveTo () die Position des Cursors im Elementbereich an, und lineTo () gibt den Endpunkt der Linie an. Der Strich () macht die Linie sichtbar. Hier ist der Code für Ihre Referenz:
Code:
Canvas Line Example
canvas (
border: 2px solid black;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
);
Ausgabe:
2. Zeichnen eines Kreises auf der HTML-Zeichenfläche
Im Gegensatz zu Rechtecken gibt es in JavaScript keine bestimmte Methode zum Zeichnen eines Kreises. Stattdessen können Sie die arc () -Methode verwenden, mit der Sie Bögen zeichnen, um einen Kreis in der Zeichenfläche zu zeichnen. Um eine Leinwand mit einem Kreis zu erhalten, können Sie Folgendes verwenden:
Syntax :
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Hier ist ein Beispiel für eine Seite mit einem Kreis:
Code:
Canvas with a circle
canvas (
border: 3px solid red;
)
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();
);
Ausgabe:
3. Zeichnen eines Textes in HTML Canvas
Text kann auch in einer HTML-Zeichenfläche gezeichnet werden. Um Text auf Ihre Leinwand zu bekommen, können Sie die filltext () -Methode verwenden. Es folgt ein Beispiel für eine HTML-Seite, die Text in einem Zeichenflächenelement enthält:
Code:
canvas with text inside the element
canvas (
border: 3px solid red;
)
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);
);
Ausgabe:
4. Zeichnen eines Bogens in einem HTML-Canvas
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, in der Sie lediglich Ihre Variable hinzufügen müssen:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Es folgt eine HTML-Seite mit einem Bogen innerhalb eines Zeichenflächenelements:
Code:
Arc inside an HTML Canvas
canvas (
border: 3px solid red;
)
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();
);
Ausgabe:
5. Zeichnen eines linearen oder kreisförmigen Farbverlaufs
Mit dieser Methode können Sie LienearGradient () 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:
If you are seeing this. the browser does not support the HTML5 canvas.
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);
Ausgabe:
Ebenso lautet die Methode zum Zeichnen von Kreisverläufen createRadialGradient ().
Syntax:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Code:
If you are seeing this. the browser does not support the HTML5 canvas.
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);
Ausgabe:
Fazit
Nachdem Sie sich mit der HTML-Zeichenfläche vertraut gemacht haben und wissen, wie sie in Webseiten verwendet werden kann, sollten Sie sich mit Ihren Fähigkeiten im Bereich Webdesign sicherer fühlen. In einigen Fällen können Bilder verwendet werden. Der Vorteil der HTML-Zeichenfläche besteht darin, dass sie skalierbar und in Bezug auf Größe und Verarbeitungsleistung viel leichter ist.
Empfohlener Artikel
Dies ist eine Anleitung zu HTML Canvas. Hier besprechen wir Was ist HTML Canvas und seine Beispiele zusammen mit der Code-Implementierung und Ausgabe. Sie können auch unsere Artikelvorschläge durchgehen, um mehr zu erfahren -
- Top 16 HTML-Stilattribute
- HTML vs HTML5 | Top 9 Vergleiche
- WebGL vs Canvas - Top Unterschiede
- Top 40 HTML Interview Fragen
- Stellen Sie eine Hintergrundfarbe in HTML mit Beispiel ein