Was sind die neuen Funktionen von HTML5_html5-Tutorial-Fähigkeiten?-H5-Tutorial-php.cn

Was sind die neuen Funktionen von HTML5_html5-Tutorial-Fähigkeiten?

WBOY

Freigeben： 2016-05-16 15:46:10

Original

1941 Leute haben es durchsucht

1. Einige interessante neue Funktionen in HTML5:

Canvas-Element zum Zeichnen
Video- und Audioelemente für die Medienwiedergabe
Bessere Unterstützung für lokale Offline-Speicherung
Neue spezielle Inhaltselemente wie Artikel, Fußzeile, Kopfzeile, Navigation, Abschnitt
Neue Formularsteuerelemente , wie Kalender, Datum, Uhrzeit, E-Mail, URL, Suche
2. HTML5-Video
1. Videoformat

Ogg = Ogg-Datei mit Theora-Videokodierung und Vorbis-Audiokodierung
MPEG4 = MPEG 4-Datei mit H.264-Videokodierung und AAC-Audiokodierung
WebM = mit VP8-Videokodierung und Vorbis-Audio kodierte WebM-Datei
2. Attribute des

* Tag gibt Multimedia-Ressourcen an, die mehrere sein können

3. Instanzen
(1)

Code kopierenDer Code lautet wie folgt:

Video</title> ; </head> <body> <video src=". HTML Audio Video-Encoding Tool.mp" Controls="Controls" width="px" height="px" > ;</video> </body> </html> </div>Wirkung: <img src="http://files.jb51.net/file_images/article/201512/2015120116154453.png" alt="">(2) HTML5 <Video> – Verwenden Sie DOM zur Steuerung (verwenden Sie JS, um die Videowiedergabe/-pause sowie das Vergrößern und Verkleinern zu steuern) 　<Tipps: Die Eingabe von console.log("hello"); in der JS-Funktion bedeutet, dass Hallo an die Browserkonsole ausgegeben wird. Wenn die Konsole Hallo ausgeben kann, bedeutet dies, dass die Funktion aufgerufen werden kann. <div class="msgheader"><div class="right">Code kopierenDer Code lautet wie folgt:</div></div> <!DOCTYPE html PUBLIC "-/ /WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <div class="msgborder" id="phpcode34"> <html xmlns="http :// www.w.org//xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; ; <title>Video

Wirkung:

Klicken Sie, um das Video zu vergrößern oder zu verkleinern, und es werden entsprechende Änderungen vorgenommen.
3. Audio1. Audioformat

Das Steuerattribut

wird zum Hinzufügen von Wiedergabe-, Pausen- und Lautstärkereglern verwendet. Der zwischen

eingefügte Inhalt ist für die Anzeige in Browsern vorgesehen, die das Audioelement nicht unterstützen. (Das Gleiche gilt im Video)

4. HTML 5 Canvas (Leinwand)
1. Was ist Canvas?
Das Canvas-Element wird zum Zeichnen von Grafiken verwendet Webseiten. 　*Das Canvas-Element von HTML5 verwendet JavaScript, um Bilder auf der Webseite zu zeichnen. Das Canvas-Element selbst verfügt über keine Zeichenfunktionen. Alle Zeichenarbeiten müssen in JavaScript durchgeführt werden.
　*Die Leinwand ist ein rechteckiger Bereich, in dem Sie jedes Pixel steuern können.
　*Canvas verfügt über eine Vielzahl von Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Zeichen und zum Hinzufügen von Bildern.

2. Relevante JS-Kenntnisse:
(1) Das getContext("2d")-Objekt ist ein integriertes HTML5-Objekt mit einer Vielzahl von Zeichenpfaden, Rechtecken, Kreisen, Zeichen usw Ergänzungen Bildmethode.
　(2) Die fillStyle-Methode färbt es ein und die fillRect-Methode gibt Form, Position und Größe an. [Die fillRect-Methode hat Parameter (0,0,150,75). Bedeutung: Zeichnen Sie ein 150x75 großes Rechteck auf der Leinwand, beginnend in der oberen linken Ecke (0,0)】
3. Beispiel
　 (1) Bewegen Sie die Maus über das Rechteck, um die Koordinaten anzuzeigen

Code kopierenDer Code lautet wie folgt:

function cnvs_getCoordinates(e)
{
x=e.clientX; ;! --clientX-Ereignisattribut gibt die horizontale Koordinate des Mauszeigers auf die Browserseite (oder den Clientbereich) zurück, wenn das Ereignis ausgelöst wird -->
y=e.clientY;
document.getElementById(" xycoordinates") .innerHTML="Koordinaten: (" x "," y ")";
";
}

Bewegen Sie die Maus über das Rechteck unten Sie können die Koordinaten sehen auf:

onmousemove=" cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">

< ;/body>

Wissenspunkt:
*clientX-Ereignisattribut gibt die horizontale Koordinate des Mauszeigers auf die Browserseite (oder den Clientbereich) zurück, wenn das Ereignis ausgelöst wird. Der Clientbereich bezieht sich auf das aktuelle Fenster.
　*InnerText und innerHTML können dem Tag-Körper entsprechende Informationen hinzufügen.

Wirkung:

(2) Linien zeichnen

Code kopieren

Der Code lautet wie folgt:

canvas

Wissenspunkte:
*moveto bedeutet, sich zu einer bestimmten Koordinate zu bewegen, und lineto bedeutet, eine Linie von der aktuellen Koordinate mit einer bestimmten Koordinate zu verbinden. Diese beiden Funktionen ergeben zusammen eine gerade Linie. Um eine Linie zu zeichnen, müssen Sie einen „Stift“ verwenden. Anschließend legt MoveToEx() die Startposition des zu zeichnenden Stifts (x, y) fest. Um die Endposition festzulegen, müssen Sie dann die LineTo-Funktion verwenden Bestimmen Sie die Endposition (xend, yend), sodass eine Linie gezeichnet wird. Jedes Mal wird es mit der vorherigen Koordinate verbunden.
　Die Methode *Stroke() zeichnet tatsächlich den durch die Methoden moveTo() und lineTo() definierten Pfad. Die Standardfarbe ist Schwarz.
Wirkung:

(3) Zeichne einen Kreis
　*fill()-Methode füllt das aktuelle Bild (Pfad). Die Standardfarbe ist Schwarz.
*arc()-Methode erstellt einen Bogen/eine Kurve (wird zum Erstellen eines Kreises oder Teilkreises verwendet): context.arc(x,y,r,sAngle,eAngle,countercentury);

Mittelpunkt: arc(100,75,50,0*Math.PI,1.5*Math.PI)
Startwinkel: arc(100,75,50,0,1.5*Math.PI )
Endwinkel: arc(100,75,50,0*Math.PI,1.5*Math.PI)

* Cxt.beginPath(): Öffnen Sie den Pfad. Nach dem Öffnen können Sie zugehörige Attribute zurücksetzen. Cxt.closePath(): Einen Pfad schließen.

Code kopieren

Der Code lautet wie folgt:

< /body>

Wirkung:

(4) Farbverlauf
　Die Methode *createLinearGradient() erstellt ein lineares Verlaufsobjekt. Der Farbverlauf kann zum Füllen von Rechtecken, Kreisen, Linien, Text und mehr verwendet werden. Verwenden Sie die Methode addColorStop(), um verschiedene Farben und die Position der Farben im Verlaufsobjekt anzugeben. JS-Syntax: context.createLinearGradient(x0,y0,x1,y1):

Die Methode *addColorStop() gibt die Farbe und Position im Verlaufsobjekt an. JS-Syntax: gradient.addColorStop(stop,color);

Code kopieren

Der Code lautet wie folgt:

画布

　　效果：

(5)把一幅图像放置到画布上
　　*drawImage() 方法在画布上绘制图像、画布或视频.也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸.
　　　　*JS语法1：在画布上定位图像：context.drawImage(img,x,y);
　　　　*JS语法2：在画布上定位图像, 并规定图像的宽度和高度:context.drawImage(img,x,y,width,height);
　　　　*JS ,height,x,y,width,height);

复制代码

代码如下:

< ;/html>