Inhaltsverzeichnis
Das Element Segeltuch Es ist eine der am meisten erwarteten Neuheiten, die es hat HTML5 Da es eine ernsthafte Alternative zum Flash-Plug-in von Adobe ist, gewinnen wir dank seiner nativen Fähigkeiten und der Unabhängigkeit von einer Bibliothek von Drittanbietern direkt Stabilität und Browserunterstützung, falls es bei der Implementierung des HTML5-Standards zu Problemen kommt .Das Element Segeltuch ermöglicht es uns, einen Bereich in unseren Dokumenten abzugrenzen HTML5 wo wir über Javascript Effekte und Bewegungen zeichnen und sogar hinzufügen können.
Das Canvas-Element
Bevor Sie mit dem Artikel arbeiten können Segeltuch, wir werden seine grundlegenden Eigenschaften definieren, wir haben, dass es ein Flow-Element ist, es ist völlig neu in HTML5, seine Attribute sind Höhe für seine Höhe und Breite für seine Breite.
Sehen wir uns unten ein kleines Beispiel an, wie wir einen Canvas in unserem Dokument definieren können:
Beispiel Ihr Browser unterstützt das Element nicht Segeltuch Sehen wir uns schnell an, was im Beispiel passiert; Zuerst definieren wir einen Stil, bei dem wir einen etwas dicken Rand zuweisen, um unsere unterscheiden zu können Segeltuch leer, dann starten wir das Canvas-Element mit seinem öffnenden Label und definieren seine Höhen- und Breitenattribute, innerhalb der Labels platzieren wir eine Nachricht, falls das Dokument mit einem Browser geöffnet wird, der diese Spezifikation des Standards nicht unterstützt.
Sehen wir uns nun an, wie dieser Code, den wir gerade erklärt haben, in unserem Browser aussieht:
Unsere erste Zeichnung
Wie wir zu Beginn des Tutorials erwähnt haben, müssen wir Javascript verwenden, um Aktionen innerhalb des Canvas zu zeichnen und auszuführen. Dazu verwenden wir eine Methode namens getContext() das versetzt uns in den Kontext des Canvas und damit können wir ihm sagen, was wir zeigen sollen.
Wir können Figuren sowohl in 2D als auch in 3D zeichnen, dafür übergeben wir im ersten Fall das Argument "2d".
Schauen wir uns das folgende Beispiel an, um besser zu definieren, was wir erklären:
Beispiel Ihr Browser unterstützt das Element nicht Segeltuch Hier haben wir einfach eine Variable definiert ctx dem wir das Objekt zuordnen werden dokumentieren und letztere wird die Methode aufrufen GetContext und wenden Sie es auf das Canvas-Element an; dann haben wir, dass die Variable ctx eine Methode namens . aufruft fillRect und dazu übergeben wir einige Koordinaten, wenn wir genau hinsehen, übergeben wir es 4 Seiten, sehen wir, dass es dies im Browser gezeichnet hat:
