Quelles sont les nouvelles fonctionnalités des compétences du didacticiel HTML5

Quelles sont les nouvelles fonctionnalités des compétences du didacticiel HTML5_html5

WBOY

Libérer： 2016-05-16 15:46:10

original

1897 Les gens l'ont consulté

1. Quelques nouveautés intéressantes en HTML5 :

Élément de toile pour le dessin
Éléments vidéo et audio pour la lecture multimédia
Meilleure prise en charge du stockage local hors ligne
Nouveaux éléments de contenu spéciaux tels que l'article, le pied de page, l'en-tête, la navigation, la section
Nouveaux contrôles de formulaire , tels que le calendrier, la date, l'heure, l'e-mail, l'url, la recherche
2. Vidéo HTML5
1.

Ogg = fichier Ogg avec encodage vidéo Theora et encodage audio Vorbis

MPEG4 = fichier MPEG 4 avec encodage vidéo H.264 et encodage audio AAC

WebM = avec encodage vidéo VP8 et fichier WebM encodé audio Vorbis

2. Attributs de la balise

* La balise spécifie les ressources multimédias, qui peuvent être multiples

3. Instances

(1)

Copier le code

Le code est le suivant :

Vidéo</title> ; </head> <body> <video src=". Outil d'encodage audio-vidéo HTML.mp" CONTROLS="Controls" width="px" height="px" > ;</video> </body> </html> Effet : </div> (2) HTML5 <video> - Utilisez DOM pour le contrôle (utilisez JS pour contrôler la lecture/pause de la vidéo, le zoom avant et arrière)<img src="http://files.jb51.net/file_images/article/201512/2015120116154453.png" alt=""> 　<Conseils : saisir console.log("hello"); dans la fonction JS signifie afficher bonjour à la console du navigateur. Si la console peut afficher bonjour, cela signifie que la fonction peut être appelée. Copier le code<div class="msgheader"><div class="right">Le code est le suivant : <!DOCTYPE html PUBLIC "-/ /WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http :// www.w.org//xhtml"> <head><div class="msgborder" id="phpcode34"> <meta http-equiv="Content-Type" content="text/html; ; <title>Video

Effet :

Cliquez pour agrandir ou réduire la vidéo et il y aura des changements correspondants.
3. Audio1.

2. Attribut de balise

control est utilisé pour ajouter des commandes de lecture, de pause et de volume. Le contenu inséré entre est destiné à être affiché par les navigateurs qui ne prennent pas en charge l'élément audio. (Idem dans la vidéo)

4. HTML 5 Canvas (canvas)

1. Qu'est-ce que Canvas ? L'élément canvas est utilisé pour dessiner des graphiques dessus. pages Web .
　*L'élément canevas de HTML5 utilise JavaScript pour dessiner des images sur la page Web. L'élément canevas lui-même n'a aucune capacité de dessin. Tous les travaux de dessin doivent être effectués en JavaScript. 　*La toile est une zone rectangulaire dont vous pouvez contrôler chaque pixel. 　*canvas dispose d'une variété de méthodes pour dessiner des chemins, des rectangles, des cercles, des personnages et ajouter des images.

2. Connaissances JS pertinentes :

(1) L'objet getContext("2d") est un objet HTML5 intégré, avec une variété de chemins de dessin, de rectangles, de cercles, de caractères et ajouts Méthode Image.
　(2) La méthode fillStyle le colore et la méthode fillRect spécifie la forme, la position et la taille. [La méthode fillRect a des paramètres (0,0,150,75). Signification : dessinez un rectangle de 150x75 sur la toile, en partant du coin supérieur gauche (0,0)】
3 Exemple
　 (1) Passez la souris sur le rectangle pour voir les coordonnées.

Copier le code

Le code est le suivant :

function cnvs_getCoordonnées(e)
{
x=e.clientX < ;! L'attribut d'événement --clientX renvoie la coordonnée horizontale du pointeur de la souris vers la page du navigateur (ou la zone client) lorsque l'événement est déclenché -->
y=e.clientY;
document.getElementById(" xycoordonnées") .innerHTML="Coordonnées : (" x "," y ")";
}
function cnvs_clearCoordonnées()
{
document.getElementById("xycoordonnées").innerHTML=" ";
}

Passez la souris sur le rectangle ci-dessous Vous pouvez voir les coordonnées sur :

onmousemove=" cnvs_getCoordonnées(événement)" onmouseout="cnvs_clearCoordonnées()">

Point de connaissance :
L'attribut d'événement *clientX renvoie la coordonnée horizontale du pointeur de la souris vers la page du navigateur (ou la zone client) lorsque l'événement est déclenché. La zone client fait référence à la fenêtre actuelle.

　*InnerText et innerHTML peuvent ajouter les informations correspondantes au corps de la balise. Effet :

(2) Tracer des lignes

Copier le code

Le code est le suivant :

canvas

Points de connaissance :
*moveto consiste à se déplacer vers une certaine coordonnée, et lineto consiste à connecter une ligne de la coordonnée actuelle à une certaine coordonnée. Ces deux fonctions s'additionnent pour tracer une ligne droite. Pour tracer une ligne, vous devez utiliser un "stylo", puis MoveToEx() fixe la position de départ du stylo à dessiner (x, y), puis pour fixer la position de fin, vous devez utiliser la fonction LineTo pour déterminer la position finale (xend, yend), de sorte qu'une ligne soit tracée. A chaque fois, il est connecté à la coordonnée précédente.
　La méthode *Stroke() tracera en fait le chemin défini par les méthodes moveTo() et lineTo(). La couleur par défaut est le noir.
Effet :

(3) Dessiner un cercle
　La méthode *fill() remplit l'image actuelle (chemin). La couleur par défaut est le noir.
La méthode *arc() crée un arc/courbe (utilisée pour créer un cercle ou un cercle partiel) : context.arc(x,y,r,sAngle,eAngle,counterclock);

Centre : arc(100,75,50,0*Math.PI,1.5*Math.PI)
Angle de départ : arc(100,75,50,0,1.5*Math.PI )
Angle de fin : arc(100,75,50,0*Math.PI,1.5*Math.PI)

* Cxt.beginPath() : ouvrez le chemin après ouverture, vous pouvez réinitialiser les attributs associés. Cxt.closePath() : ferme un chemin.

Copier le code

Le code est le suivant :

Effet :

(4) Color Gradient
　*La méthode createLinearGradient() crée un objet dégradé linéaire. Le dégradé peut être utilisé pour remplir des rectangles, des cercles, des lignes, du texte, etc. Utilisez la méthode addColorStop() pour spécifier différentes couleurs et où positionner les couleurs dans l'objet dégradé. Syntaxe JS : context.createLinearGradient(x0,y0,x1,y1) :

La méthode *addColorStop() spécifie la couleur et la position dans l'objet dégradé. Syntaxe JS : gradient.addColorStop(stop,color);

Copier le code

Le code est le suivant :

画布

　　效果：

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

复制代码

代码如下 :

< ;/html>