Backend.com HTML5-Video-Tutorial

„Backend.com HTML5 Video Tutorial“ ist jetzt und in Zukunft eine wichtige Technologie. Wenn Sie HTML5 gut erlernen, können Sie nicht nur WEB-Frontend-Schnittstellen entwickeln und Webseiten entwerfen, die sich an Geräte unterschiedlicher Größe anpassen lassen ermöglicht Ihnen sogar die Verwendung der HTML5-Technologie zur Entwicklung der Hybird App (einer Hybridanwendung für Android/iOS/Windows Phone und andere Geräte) oder die Verwendung der HTML5-Technologie zur Entwicklung von Desktop-Programmen (siehe das Node Webkit-Projekt, bitte verwenden Sie Github).

Adresse für die Kurswiedergabe: http://www.php.cn/course/469.html

Die Der Unterrichtsstil des Lehrers:

Die Vorträge des Lehrers sind einfach und ausführlich, klar in der Struktur, werden Schicht für Schicht analysiert, sind ineinandergreifend, streng in der Argumentation und streng in der Struktur. Er nutzt die logische Kraft des Denkens um die Aufmerksamkeit der Schüler zu erregen und den Unterrichtsprozess vernünftig zu steuern. Durch das Anhören der Vorlesungen des Lehrers lernen die Schüler nicht nur Wissen, sondern erhalten auch eine Denkschulung und werden auch von der strengen akademischen Haltung des Lehrers beeinflusst und beeinflusst

Der schwierigere Punkt in diesem Video ist HTML5 Canvas :

1. Was ist Canvas?

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

Canvas bietet einen leeren Grafikbereich, der bestimmtes JavaScript verwenden kann API zum Zeichnen von Grafiken (Canvas 2D oder WebGL)

Erstmals von Apple für das OS rechteckige Leinwandfläche, die mit JavaScript bemalt werden kann. 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 bietet viele Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern.

Canvas-Standard:

Der neueste Standard

Stabiler Versionsstandard

Derzeit wird der Standard noch verbessert. Erstens reicht die Verwendung der frühen API aus, um alle Anwendungen abzuschließen.

1.2 Hauptanwendungsbereiche von Canvas (Verstehen)

1. Spiele: Canvas ist dreidimensionaler und anspruchsvoller als Flash Aufgrund der webbasierten Bildanzeige sind Canvas-Spiele in Bezug auf Sprachkompetenz und Plattformübergreifend besser.

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

3. Bannerwerbung: Flash war einst eine glorreiche Ära und Smartphones nicht noch existierte Erscheinen. Jetzt und im zukünftigen Smartphone-Zeitalter kann die HTML5-Technologie eine große Rolle bei der Bannerwerbung spielen, und der Einsatz von Canvas zur Erzielung dynamischer Werbeeffekte ist perfekt.

4. Zukunft

Simulator: Unabhängig von den visuellen Effekten oder den Kernfunktionen kann das Simulatorprodukt vollständig durch JavaScript implementiert werden.

Computerfernsteuerung: 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.

1.3 Kursziele

Erlernen Sie die Verwendung der grundlegenden Canvas-API und verwenden Sie Canvas zum Vervollständigen einfacher Zeichnungen

Erzielen Sie eine Datenvisualisierung

2 Einführung in die Canvas-Tag

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

2.1 Canvas-Kompatibilität

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

Nur ​​IE9 und höher können Canvas-Tag unterstützen

Tipp: Ihr Browser unterstützt kein Canvas, bitte aktualisieren Sie den Browser

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

2.2 Legen Sie die Aufmerksamkeitspunkte für Breite und Höhe fest

1 Sie können HTML-Attribute/DOM verwenden Attribute „Breite“ und „Höhe“ werden zum Festlegen verwendet

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

Das Verwenden von Attributen zum Festlegen von Breite und Höhe entspricht tatsächlich einer Vergrößerung der Pixel der Leinwand

Standardbreite und -höhe: 300*150, was bedeutet: 300 Pixel in horizontaler Richtung 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

und im CSS-Stil werden keine Pixel hinzugefügt, jedes Pixel wird nur vergrößert!

2.3 Zeichnen

Verwenden Sie die in JavaScript bereitgestellte Zeichen-API zum Zeichnen

Jede Leinwand verfügt über eine Reihe von Zeichen-APIs (Werkzeugen)

2.3 .1 Grundlegende Schritte zum Zeichnen

1 Finden Sie die Leinwand

2 Rufen Sie den Zeichenkontext (eine Reihe von API-Sammlungen) über die Leinwand ab

3 Verwenden Sie die API, um das Erforderliche zu zeichnen Grafiken

Hinweis:

getContext("2d"), der Parameter „2d“ bezieht sich auf das Abrufen des Kontexts zum Zeichnen flacher Grafiken; dimensionale Grafiken, Sie müssen Eingabeparameter übergeben: „webgl“

// 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();           // 描边

2D-Kontexttyp: CanvasRenderingContext2D

Webgl-Kontext abrufen: (verstehen)

Das obige ist der detaillierte Inhalt vonBackend.com HTML5-Video-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!