Forum | Neueste Web-Entwicklung Tutorials
 

HTML Canvas Tutorial


Ihr Browser unterstützt nicht das <canvas> Element.

Die HTML <canvas> Element wird verwendet , um Grafiken auf einer Webseite zu ziehen.

Die Grafik auf der linken Seite wird mit erstellt <canvas> . Es zeigt vier Elemente: ein rotes Rechteck, ein Gradient Rechteck, ein mehrfarbiges Rechteck, und ein Multicolor-Text.


Was ist HTML Canvas?

Die HTML <canvas> Element wird verwendet , um Grafiken zu zeichnen, on the fly, über Scripting (usually JavaScript) in der (usually JavaScript) .

Das <canvas> Element ist nur ein Container für Grafiken. Sie müssen ein Skript verwenden, um tatsächlich die Grafiken zu zeichnen.

Canvas verfügt über mehrere Methoden zum Zeichnen von Pfaden, Boxen, Kreise, Text und Hinzufügen von Bildern.


Browser-Unterstützung

Die Zahlen in der Tabelle geben Sie die erste Browser - Version, die die voll unterstützt <canvas> Element.

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

HTML Canvas können Text Zeichnen

Canvas kann bunten Text, mit oder ohne Animation zeichnen.


HTML Canvas Kann Graphics Draw

Canvas hat tolle Features für die grafische Darstellung der Daten mit Bildern von Grafiken und Diagrammen.


HTML Canvas kann animiert werden

Canvas-Objekte bewegen kann. Alles ist möglich: von der einfachen, hüpfende Bälle komplexe Animationen.


HTML Canvas können interaktiv sein

Canvas kann auf JavaScript-Ereignisse reagieren.

Canvas kann zu jeder Benutzeraktion (Tastenklicks, Mausklicks, Tastenklicks, Fingerbewegung) reagieren.


HTML Canvas kann in Spielen verwendet werden

Canvas 'Methoden für Animationen, bieten eine Vielzahl von Möglichkeiten für die HTML-Gaming-Anwendungen.


Leinwand-Beispiel

In HTML, ein <canvas> sieht Element wie folgt aus :

<canvas id="myCanvas" width="200" height="100"></canvas>

Das <canvas> -Element muss ein id - Attribut haben , so kann es durch JavaScript bezeichnet werden.

Die Breite und Höhe Attribut ist erforderlich, die Größe der Leinwand zu definieren.

Tip: Sie können mehrere haben <canvas> Elemente auf einer HTML - Seite.

Standardmäßig ist das <canvas> hat Element keine Grenze und keinen Inhalt.

Um einen Rahmen hinzuzufügen, verwenden Sie einen Stil-Attribut:

Beispiel

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Versuch es selber "

In den folgenden Kapiteln zeigen, wie auf der Leinwand zu zeichnen.


Hi Traveller Fashion Tomorrow Startups Daily News Fit Science Amazing Baby Yup This is Japan Take Film Art In Life