Kommentar: HTML5 führt ein neues Etikett vor, und der von diesem Etikett dargestellte Bereich ist wie eine Leinwand. Alle Ihre grafischen Zeichnungen müssen am Ende auf dieser Leinwand angezeigt werden. Mit diesem Tag wurde die Expressivität des Browsergrafiks erheblich verbessert. Fühlen sich Flash und Silverlight bedroht?
1. <Canvas> TagHTML5 führt ein neues <Canvas> -Tag ein, der von diesem Tag dargestellte Bereich ist wie eine Leinwand, und alle Ihre grafischen Zeichnungen müssen am Ende auf dieser Leinwand angezeigt werden. Mit diesem Tag wurde die Expressivität des Browsergrafiks erheblich verbessert. Fühlen sich Flash und Silverlight bedroht?
Nachrichtenlink: Google behauptet Chrome 7 Browser beschleunigt 60 -mal schneller
Die Verwendung des <Canvas> -Tags ist sehr einfach, wie folgt:
<Canvas>
Ihr Browser unterstützt das Canvas -Tag nicht
</canvas>
Es gibt keinen großen Unterschied zwischen dem <Canvas> -Tag und dem gewöhnlichen HTML -Tag. Sie können seine Breite und Höhe einstellen und die Hintergrundfarbe, den Randstil usw. durch CSS einstellen.
Weitere Informationen zum <Canvas> -Tag finden Sie hier.
Der Inhalt in der Mitte des Tags ist der Ersatzinhalt. Wenn der Browser des Benutzers das <Canvas> -Tag nicht unterstützt, wird der Inhalt angezeigt. Wenn der Browser des Benutzers das <Canvas> -Tag unterstützt, wird der Inhalt ignoriert.
Der obige <Canvas> Code zeigt den folgenden Effekt an:
Ihr Browser unterstützt das Canvas -Tag nicht
Wenn Sie den IE -Browser verwenden, sehen Sie möglicherweise nur eine Eingabeaufforderung. Wenn Sie Google Chrome oder Firefox -Browser verwenden, können Sie eine rotliche Fläche sehen.
2. Kontext rendern
Tatsächlich können wir nichts mit dem <Canvas> -Tag machen. Schüler, die Windows -Programmierungen gespielt haben, wissen, dass Sie beim Zeichnen in Windows zuerst einen Gerätekontext DC erhalten müssen. Wenn Sie auf das <Canvas> -T -Tag zeichnen, müssen Sie auch einen Rendering -Kontext erhalten. Unsere Grafiken werden nicht direkt auf dem Bildschirm, sondern zuerst im Kontext (Kontext) gezeichnet und dann auf dem Bildschirm aktualisiert.
Off Topic: Warum müssen Sie ein Konzept mit einem so komplexen Kontext zusammenstellen? Aufgrund des Kontextobjekts können wir in unseren Augen verschiedene Grafikgeräte gleich aussehen lassen. Wir müssen uns nur auf das Zeichnen konzentrieren und das Betriebssystem und den Browser über andere Aufgaben sorgen lassen. Um es unverblümt auszudrücken, verwandeln Sie alle Arten von Beton in einheitliche Abstraktionen, wodurch unsere Belastung verringert wird.
Das Erhalten des Kontextes ist sehr einfach. Sie benötigen nur zwei Codezeilen wie folgt:
var canvas = document.getElementById ('Tutorial');
var ctx = canvas.getContext ('2d');
Holen Sie sich zuerst das Canvas -Objekt und rufen Sie dann die GetContext -Methode des Canvas -Objekts auf. Diese Methode kann derzeit nur in Parameter 2D übergeben. In naher Zukunft kann es Parameter 3D unterstützen. Sie müssen verstehen, was das bedeutet, freuen wir uns darauf.
Die GetContext -Methode gibt ein CanvasrenderingContext2D -Objekt zurück, dh das Rendering -Kontextobjekt. Hier finden Sie mehr darüber, alle sind einige Zeichenmethoden.
3. Browserunterstützung
Neben der Anzeige alternativer Inhalte auf diesen nicht unterstützten Browsern können wir auch überprüfen, ob der Browser Leinwand durch Skripte unterstützt. Die Methode ist sehr einfach. Beurteilen Sie einfach, ob die GetContext -Funktion vorliegt. Der Code ist wie folgt:
var canvas = document.getElementById ('Tutorial');
if (canvas.getContext) {
alert ("Support <Canvas> Tag");
} anders {
alert ("nicht unterstützt <Canvas> Tag");
}
4. Ein kleines Beispiel
Im Folgenden wird ein Beispiel für das Auf- und Abbeziehen von Linien nach oben unter Verwendung der Zeichnungsfunktion von HTML5 demonstriert. Der spezifische Code wird im nachfolgenden Inhalt angegeben.
Ihr Browser unterstützt das <Canvas> -Tag nicht. Bitte verwenden Sie Chrome oder Firefox Browser