Was ist HTML5-Canvas?

canvas ist ein von HTML5 bereitgestelltes Tag zum Anzeigen von Zeicheneffekten. Das Tag „“ stellt einen leeren Grafikbereich (einen rechteckigen Bereich der Leinwand) bereit und erfordert die Verwendung einer bestimmten JavaScript-API zum Zeichnen von Grafiken.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

1. Was ist Canvas?

Canvas ist ein von HTML5 bereitgestellter Tag zum Anzeigen von Zeicheneffekten.

Canvas bietet einen leeren Grafikbereich, der eine bestimmte JavaScript-API zum Zeichnen von Grafiken verwenden kann (Canvas 2D oder WebGL). Apple für das Dashboard und den Safari-Browser des Betriebssystems Kontrollieren Sie jedes Pixel davon.

Das Canvas-Tag verwendet JavaScript zum Zeichnen von Bildern auf der Webseite und verfügt nicht über die Zeichenfunktion selbst.

Canvas verfügt über mehrere Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Zeichen und zum Hinzufügen von Bildern.

1.2 Die Hauptanwendungsbereiche von Canvas (verstehen)

1) Spiele: Canvas ist dreidimensionaler und ausgefeilter als Flash in Bezug auf die webbasierte Bildanzeige, und Canvas-Spiele sind in Bezug auf Flüssigkeit und Crossover besser. Plattform.

2) Visualisierte Daten (Datendiagramme), wie zum Beispiel: Baidu’s echart, d3.js, three.js

3) Bannerwerbung: In der glorreichen Ära von Flash gab es noch keine Smartphones. Jetzt und im zukünftigen Smartphone-Zeitalter kann die HTML5-Technologie eine große Rolle in der Bannerwerbung spielen, und die Verwendung von Canvas zur Erzielung dynamischer Werbeeffekte ist perfekt.

4) Zukünftiger

Simulator: Ob in Bezug auf visuelle Effekte oder Kernfunktionen, Simulatorprodukte können vollständig durch JavaScript implementiert werden.

Fernsteuerung des Computers: Mit Canvas können Entwickler die webbasierte Datenübertragung besser implementieren und eine perfekte visuelle Steuerungsschnittstelle erstellen.

Grafikeditor: Der Photoshop-Grafikeditor wird zu 100 % webbasiert sein.

2. Einführung in das Canvas-Tag

<canvas width="600" height="400"></canvas>

Funktion: Zeigt den Inhalt der Zeichnung an, kann aber nicht zeichnen

2.1 Kompatibilität der Leinwand

<canvas width="600" height="400">
    IE9及其以上版本的浏览器，才支持canvas标签
    提示：您的浏览器不支持canvas，请升级浏览器
</canvas>

2.2 Hinweise zum Festlegen von Breite und Höhe

1) Sie können das HTML-Attribut/DOM verwenden Attributbreite und -höhe zum Festlegen

2) Nicht: Verwenden Sie CSS-Stile zum Festlegen von Breite und Höhe

Verwenden Sie Attribute zum Festlegen von Breite und Höhe, was tatsächlich einer Vergrößerung der Pixel der Leinwand entspricht

Standardbreite und -höhe: 300*150, was bedeutet: horizontale Richtung Es gibt 300 Pixel und 150 Pixel in vertikaler Richtung.

Die Verwendung von Attributen zum Festlegen der Breite und Höhe erhöht oder verringert die Pixel der Leinwand.

Durch die Verwendung des CSS-Stils werden die Pixel nicht erhöht, aber erweitert nur jedes Pixel!

2.3 Zeichnen ) Holen Sie sich den Zeichenkontext (eine Reihe von API-Sammlungen) über Canvas

3) Verwenden Sie die API, um die erforderlichen Grafiken zu zeichnen

// 1）、找到canvas
 var cv = document.getElementById("canvasId");
 
// 2）、拿到canvas绘图上下文
 var ctx = cv.getContext("2d");
 
// 3）、使用上下文中的API绘制图形
 ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
 ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
 ctx.stroke();           // 描边

Empfohlenes Tutorial: „

HTML-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas ist HTML5-Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!