suchen

Heim >Web-Frontend >H5-Tutorial >Li Yanhui HTML5-Videodatenfreigabe

Li Yanhui HTML5-Videodatenfreigabe

巴扎黑
巴扎黑Original
2017-08-31 11:57:543051Durchsuche

Schauen Sie sich das Video-Tutorial „Li Yanhui HTML5 Video Tutorial“ an, das Ihnen eine detaillierte Einführung in HTML5 gibt. HTML5 ist die fünfte große Überarbeitung der Hypertext Markup Language (HTML), d. h. sie fügt einige neue Funktionen hinzu Tags als der ursprüngliche Standard, um mehr Funktionen zu erreichen, standardisierter zu sein und besser für das mobile Internet geeignet zu sein.

Li Yanhui HTML5-Videodatenfreigabe

Adresse für die Videowiedergabe: http://www.php.cn/course/365.html

Schwierigkeiten dieses Kurses Es liegt an den neuen Inhalten in HTML5 und der Verwendung von Canvas:

Viele Zeicheneffekte werden mit Canvas erzielt, daher ist das gute Erlernen von Canvas der Schlüssel zum guten Erlernen von HTML5.

1. Einführung in Canvas

1.1 Was ist Canvas?

ist ein wichtiges Element in HTML5 und kann ohne externe Plug-Ins ausgeführt werden.

Es bietet leistungsstarke Grafiken . Verarbeitungsfunktionen (Zeichnen, Transformation, Pixelverarbeitung...).

Aber es sollte beachtet werden, dass das Canvas-Element selbst keine Grafiken zeichnet, sondern lediglich einer leeren Leinwand entspricht.

Wenn Entwickler Grafiken auf der Leinwand zeichnen müssen, müssen sie zum Zeichnen JavaScript-Skripte verwenden.

1.2 Was kann Leinwand?

Zeichnung grundlegender Grafiken

Zeichnung von Text

Verformung von Grafiken und Synthese von Bildern

Verarbeitung von Bildern und Videos

Animation Implementierung von

Mini Game Production

1.3 Unterstützte Browser

Die meisten modernen Browser unterstützen Canvas, wie Firefox, Safari, Chrome, neuere Versionen von Opera und IE9 werden unterstützt

IE8 und niedriger unterstützen HTML5 nicht, aber wir können Benutzer auffordern, auf die neueste Version zu aktualisieren

1.4 Über das Grundkonzept von Canvas-Tags

in Definieren des Canvas-Elements auf einem Eine HTML-Seite unterscheidet sich nicht von der Definition anderer gewöhnlicher Elemente. Zusätzlich zur Angabe allgemeiner Attribute wie ID, Stil, Klasse, versteckt usw. können auch die Attribute Breite und Höhe festgelegt werden.

Warum möchten Sie speziell darüber sprechen?

Das erklären wir im Detail in Kapitel 2.2.

Nachdem wir das Canvas-Element auf der Webseite definiert haben, handelt es sich außerdem nur um eine leere Leinwand. Wenn Sie auf der Leinwand zeichnen möchten, müssen Sie die folgenden Schritte ausführen.

Rufen Sie das DOM-Objekt ab, das dem Canvas-Element entspricht, das ein Canvas-Objekt sein muss.

Rufen Sie die getContext()-Methode des Canvas-Objekts auf, die ein canvasRenderingContext2D-Objekt zurückgibt, das Grafiken zeichnen kann.

Rufen Sie die Methode des zu zeichnenden CanvasRenderingContext2D-Objekts auf.

Dann beginnen wir mit unserer Canvas-Übung und sehen, wie Canvas Grafiken zeichnen kann.

2. Canvas tatsächlicher Kampf

2.1 Überprüfen Sie die aktuelle Browserunterstützung für Canvas

Wir haben oben auch erklärt, dass einige unserer Browser Canvas nicht unterstützen diesmal?

Zu diesem Zeitpunkt können wir Inhalte direkt zwischen die Canvas-Tags schreiben. Der Vorteil davon besteht darin, dass wir den Inhalt wie folgt zwischen den Tags anzeigen können, wenn Ihr Browser Canvas nicht unterstützt. 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <style type="text/css">         
  html,body{     
          margin: 0px;   
       }         
    canvas{           
      background: #ccc;     
          }     
    </style> 
 </head> 
 <body> 
  <canvas>
    我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas 
  </canvas>  
 </body>
</html>

Nachdem der spezifische Inhalt erstellt wurde, können wir ihn jetzt sehen?

Obwohl wir die Breite und Höhe der Leinwand nicht angegeben haben, ist unsere Leinwand tatsächlich auf der Seite sichtbar.

Es ist zu beachten, dass die Breite und Höhe des Leinwand-Standardstils 300 Pixel * 150 Pixel beträgt.

Auch wenn wir die spezifische Breite und Höhe nicht festlegen, kann sie dennoch angezeigt werden. 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <style type="text/css">   
  html,body{    
  margin: 0px;   
  }   
  canvas{    
  background: #ccc;   
  }  
  </style> 
 </head> 
 <body> 
  <canvas>
    我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas 
  </canvas>   
 </body>
</html>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die neuen HTML5-Funktionen der Geek Academy umfassen den grundlegenden Quellcode für Video-KursunterlagenNächster Artikel：Die neuen HTML5-Funktionen der Geek Academy umfassen den grundlegenden Quellcode für Video-Kursunterlagen

In Verbindung stehende Artikel

Mehr sehen