Seite101-H5-Tutorial Programmier-Tutorials: Lernen SieH5-Tutorial Online-php.cn

Article Tags

H5-Tutorial

Heim

Technical articles

Web-Frontend

H5-Tutorial

Beispielcode-Analyse zur Verbesserung der Website-Frontend-Leistung in HTML5

1. Das größte Problem beim Ersetzen von Cookies durch Webspeicher besteht darin, dass sie der Anfrage jedes Mal folgen. In HTML5 werden sessionStorage und localStorage verwendet, um Benutzerdaten direkt auf dem Client zu speichern, wodurch die Datenmenge in HTTP-Anfragen reduziert werden kann. Darüber hinaus bietet Web Storage im Gegensatz zu Cookies, die Sie selbst schreiben müssen, auch APIs zur Manipulation von Daten. // Wenn localStorage vorhanden ist, verwenden Sie th

Mar 17, 2017 pm 04:10 PM

HTML5，网站，前端性能

Ausführliche Erklärung des HTML5-Canvas (6)

Eine professionelle Einführung in die Bezier-Kurve finden Sie unter: http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html Im Folgenden finden Sie den Code zum Zeichnen der Bezier-Kurve auf Leinwand : LeinwandzeichnungMar 17, 2017 pm 03:54 PM

HTML5 ，canvas画布

Detaillierte Erläuterung des HTML5-Canvas (5)

drawImage bietet insgesamt drei Methoden: Positionieren des Bildes auf der Leinwand. context.drawImage(img,x,y); Positionieren Sie das Bild auf der Leinwand und geben Sie die Breite und Höhe des Bildes an. context.drawImage(img,x,y,width,height);Schneiden Sie das Bild zu und positionieren Sie den zugeschnittenen Teil auf der Leinwand. context.drawImage(img,sx,sy,swidth,height,x,y,width,height

Mar 17, 2017 pm 03:50 PM

HTML5 ，canvas画布

Detaillierte Erläuterung des HTML5-Canvas (4)

arcTo-Verwendung Verwendung: arcTo(x1, y1, x2, y2, radius) Beschreibung: Die arcTo()-Methode verwendet den Clip, der durch den aktuellen Endpunkt, Endpunkt 1 (x1, y1) und Endpunkt 2 (x2, y2) Winkel gebildet wird. Zeichnen Sie dann auf dem Kreis einen Bogen, der beide Seiten des Winkels tangiert und einen Radius hat. Der Startpunkt des Bogens ist der Tangentenpunkt zwischen der Seite, auf der sich der aktuelle Endpunkt befindet, und dem Kreis. Der Endpunkt des Bogens ist der Tangentenpunkt zwischen der Seite, auf der sich Endpunkt 2 (x2, y2) befindet, und dem Kreis Der gezeichnete Bogen ist die kürzeste Länge zwischen den beiden Tangentenpunkten. Darüber hinaus, wenn

Mar 17, 2017 pm 03:46 PM

HTML5 ，canvas画布

Ausführliche Erklärung des HTML5-Canvas (3)

In diesem Abschnitt geht es hauptsächlich um Beispiele für verschiedene Verwendungsmöglichkeiten von Canvas. Zunächst werde ich ein Problem lösen, das ich beim Anwenden von Canvas-Zeichnungen hatte. Ein seltsames Problem. Der folgende Code zeichnet ein 100*100-Rechteck auf Canvas: Canvas-Grundübungen .myCanvas{

Mar 17, 2017 pm 03:39 PM

HTML5 ，canvas画布

Ausführliche Erklärung des HTML5-Canvas (2)

Der vorherige Artikel gab eine kurze Einführung und Anwendungsbeispiele des Canvas-Tags, aber tatsächlich ist die Verwendung von Canvas sehr leistungsfähig. Viele coole HTML5-Animationen und -Spiele werden auf Basis von Canvas erstellt. Daher habe ich beschlossen, weiterhin zwei Blogbeiträge zum Thema Canvas zu schreiben, um die Grundlagen von Canvas zu festigen. In diesem Artikel werden hauptsächlich die zugehörigen Eigenschaften und die Verwendung von Canvas vorgestellt. Eigenschaft „Farbe“, „Stil“ und „Schattierung“ Beschreibung fillStyle Legt die Farbe, den Farbverlauf oder das Muster zum Füllen des Gemäldes fest oder gibt sie zurück

Mar 17, 2017 pm 03:34 PM

HTML5 ，canvas画布

Ausführliche Erklärung des HTML5-Canvas (1)

Das Canvas-Element in HTML5 wird zum Zeichnen von Grafiken auf Webseiten verwendet. Eigenschaften von Canvas Canvas ist ein rechteckiger Bereich, von dem jedes Pixel gesteuert werden kann. Der folgende Code verwendet JavaScript, um das Zeichnen zu steuern Leinwandbildschirm zum Zeichnen eines 200 x 200 großen roten Rechtecks: meine Leinwandseite

Mar 17, 2017 pm 03:32 PM

HTML5 ，canvas画布

Eine einfache Methode zum Erzielen eines Scrolleffekts basierend auf dem HTML-Tag Marquee

Der automatische Bildlaufeffekt der Seite kann durch Javascript erreicht werden, aber heute habe ich versehentlich ein HTML-Tag entdeckt – , das ohne JS-Steuerung eine Vielzahl von Bildlaufeffekten erzielen kann.

Mar 17, 2017 pm 03:08 PM

HTMLmarquee滚动效果

Detaillierte Erläuterung des Pushstate- und Popstate-Vorgangsverlaufs von HTML5, ohne das aktuelle URL-Codebeispiel zu aktualisieren und zu ändern

In diesem Artikel wird hauptsächlich der Verlauf der Pushstate- und Popstate-Vorgänge in HTML5 vorgestellt, und Freunde, die sie benötigen, können darauf verweisen, wie sie die aktuelle URL ändern können.

Mar 16, 2017 pm 04:25 PM

HTML5，pushstate，popstate

Detaillierte Erläuterung der Kompatibilitätslösungen für HTML5-Browser

Die meisten Browser unterstützen derzeit HTML5. Browser niedrigerer Versionen unterstützen alle HTML5-Browser und nicht erkannte Elemente werden automatisch als Inline-Elemente verarbeitet. Daher können Sie mit der folgenden Methode dem Browser beibringen, mit „unbekannten“ HTML-Elementen umzugehen. HTML5-Elemente als Blockelemente definieren HTML5 definiert 8 neue semantische HTML-Elemente. Alle diese Elemente sind Elemente auf Blockebene. Damit ältere Browser diese Elemente korrekt anzeigen können, können Sie die CSS-Anzeigeeigenschaft festlegen

Mar 16, 2017 pm 04:19 PM

HTML5，浏览器，兼容性

HTML5-Webspeicher-Web-SQL-Beispielcode-Analyse

Was ist Web-SQL? In Anwendungen verarbeiten wir häufig große Mengen strukturierter Daten. HTML5 führt das Konzept der Web-SQL-Datenbank ein, das es Anwendungen ermöglicht, über eine asynchrone Javascript-Schnittstelle auf SQLlite-Datenbanken zuzugreifen. Derzeit ist Web SQL jedoch nicht in der HTML5-Spezifikation enthalten, sondern eine separate Spezifikation. Safari-, Chrome- und Oprea-Browser unterstützen Web SQL. Drei Kernmethoden Drei Kernmethoden, die in der Web SQL-Datenbankspezifikation definiert sind: ope

Mar 16, 2017 pm 04:16 PM

HTML5 ，web存储，web SQL

Details zur lokalen HTML5-Datenbank

Bei komplexen Datenbanken nutzt HTML5 lokale Datenbanken für den Betrieb. Dies ist eine browserseitige Datenbank. In der lokalen Datenbank können wir JavaScript direkt zum Erstellen einer Datenbank verwenden und SQL-Anweisungen verwenden, um zugehörige Datenbankoperationen auszuführen. Im Folgenden werden die einzelnen APIs der lokalen Datenbank und deren Verwendung vorgestellt. 1. Verwenden Sie openDatabase, um eine Datenbank zu erstellen. Wir können die openDatabase-Methode verwenden, um eine Datenbank zu erstellen. Die openDatabase-Methode übergibt fünf Parameter, nämlich: Datenbankname, Datenbankversionsnummer

Mar 16, 2017 pm 04:10 PM

HTML5，数据库

Detaillierte Einführung in die Übersetzung der WebSocket-API-HTML5-Spezifikation

1. Einführung Damit Webanwendungen eine bidirektionale Kommunikation mit dem Serverprozess aufrechterhalten können, wird hier die WebSocket-Schnittstelle vorgestellt. HINWEIS: Diese Schnittstelle ermöglicht keinen direkten Zugriff auf das zugrunde liegende Netzwerk. Ohne diese Schnittstelle könnte beispielsweise kein IRC-Client implementiert werden

Mar 16, 2017 pm 04:06 PM

WebSocket ，API ，HTML5

Teilen Sie einfache Beispiele für die objektorientierte HTML5-Spieleentwicklung

Beim Lesen eines Buches über HTML5-Spieleentwicklung habe ich ein gutes Beispiel gefunden, durch das ich ein tieferes Verständnis der objektorientierten Entwicklung erlangen kann. Was dieses Objekt erreichen möchte, ist: ein Bild in einem CSS-Sprite in die Leinwand zu zeichnen. Erstellen Sie zunächst ein SpriteSheet-Objekt. Der Code lautet wie folgt: var SpriteSheet = new function(){ this.map = { };

Mar 16, 2017 pm 04:02 PM

HTML5，面向对象，游戏开发