Was ist ein HTML5-Canvas?

HTML5 bietet Web-Entwickler mit den Ressourcen um Webseiten mit interaktiven, multimedialen Elementen zu erstellen. Das Canvas-Element in HTML5 schafft einen rechteckigen Raum in dem Sie JavaScript verwenden können, Zeichenoperationen, Erstellen von Shapes, Verwendung von Bildern und Verarbeitung Transformationen durchzuführen. Das Canvas-Element können Webseiten produzieren eine Vielzahl von visuellen Effekten, mit Code zum Canvas-Bereich bis auf die Ebene einzelner Pixel zu kontrollieren.

Element

Die Leinwand-Tools können Webseiten durch ein Canvas-Element wie im folgenden Beispiel Markup-Code einfügen:

< Leinwand Id = "CanvasElem" Width = "400" Height = "300" >< / Leinwand >

Die Attribute Width und Height bestimmen die Abmessungen des sichtbaren Canvas-Elements innerhalb der Seite. Das ID-Attribut ermöglicht JavaScript-Code zum Verweisen auf die Leinwand. Die Befehle zum Zeichnen innerhalb der Leinwand verwenden JavaScript, so dass ein ID-Attribut in der Regel erforderlich, um Zugriff zu erhalten ist. Das Context-Objekt spielt auch eine Rolle bei der Durchführung von Prozessen, Zeichnung, damit das Skript Zugriff darauf wird normalerweise wie folgt erhalten:

Var TheCanvas = document.getElementById("canvasElem");

Var Cont = theCanvas.getContext('2d');

Formen

Mit JavaScript können Entwickler Linien, Formen und Pfade innerhalb eines Canvas-Elements definieren. Der folgende Beispielcode veranschaulicht das Zeichnen einer Linie:

cont.beginPath();

cont.moveTo (50, 100); / / x, y

cont.lineTo (150, 200); / / x, y

Das Context-Objekt zuerst beginnt einen Pfad, dann beginnt die Positionen, die durch Koordinaten übergeben als Parameter an die Funktion "MoveTo" angegeben. Von dieser Position weist der Code das Context-Objekt zum Zeichnen einer Linie auf die Koordinaten, die als Parameter für die Funktion "LineTo" angegeben. JavaScript kann auch Formen für das Context-Objekt zu zeichnen Sie wie im folgenden Beispiel angeben:

cont.fillRect (10, 50, 100, 100);

In diesem Beispiel beginnt mit X 10 und Y-Position 50, zeichnen ein Quadrat positionieren gestalten über 100 Pixel.

Bilder und Videos

JavaScript-Code innerhalb einer Seite kann externe Bilder in ein Canvas-Element importieren oder Bilder von Grund auf neu zeichnen. Der folgende Beispielcode veranschaulicht die grundlegende Technik für ein Bild von einem angegebenen Speicherort importieren:

Var ImportedImg = new Image();

importedImg.onload = function() {}

cont.drawImage (ImportedImg, 10, 10);

};

importedImg.src = "pictures/imagefile.jpg";

Der Code erstellt ein Image-Objekt dann gibt, was ist passiert, wenn die Bildquelle geladen wird. Schließlich ruft der Code die "Src" Quelle des Bildes, das den Speicherort und den Dateinamen des zu importierenden Bildes zu reflektieren. Die Funktion "Onload" wird durchgeführt, wenn das Bild in den Browser, so dass der Code innerhalb es den Browser ziehen die Bildquelle innerhalb des Canvas-Elements anweisen kann erfolgreich geladen wurde.

Farben

Das Context-Objekt innerhalb einer HTML5-Canvas Betrieb kann Farben für Linien und Formen sowie Schatten und Farbverläufe angeben. Legen Sie die Linienfarbe verwendet JavaScript die folgende Syntax:

cont.strokeStyle = "#FF0000";

Legen Sie den Füllstil für alle Shapes, die gezeichnet wird, gilt die folgende Syntax:

cont.fillStyle = "#0000FF";

Einen Farbverlauf erstellen, können Entwickler den folgenden Code verwenden:

Var GradientObject = cont.createLinearGradient (50, 50, 200, 200);

gradientObject.addColorStop (0, "#FFFF00");

gradientObject.addColorStop (1, "#00FFFF");

Dieser Code gibt die Position und Abmessungen des Gradienten Bereich, dann zwei Werte, die die Farben an jedem Ende des Farbverlaufs.