Maison > Article > interface Web > Partage de données vidéo HTML5 de Li Yanhui

Partage de données vidéo HTML5 de Li Yanhui

巴扎黑original: 2017-08-31 11:57:543036parcourir

Découvrez le didacticiel vidéo « Tutoriel vidéo Li Yanhui HTML5 », qui vous présentera HTML5 en détail. HTML5 est la cinquième révision majeure du langage de balisage hypertexte (HTML), c'est-à-dire la dernière version qui ajoute de nouvelles fonctionnalités ; que la norme d'origine pour réaliser plus de fonctions, être plus standardisées et plus adaptées à l'Internet mobile.

Adresse de lecture vidéo : http://www.php.cn/course/365.html

Difficultés de ce cours Cela réside dans le nouveau contenu en HTML5 et l'utilisation de Canvas :

De nombreux effets de dessin sont obtenus à l'aide de Canvas, donc bien apprendre Canvas est la clé pour bien apprendre le HTML5.

1. Introduction à la toile

1.1 Qu'est-ce que la toile ?

est un élément important en HTML5. Semblable aux éléments audio et vidéo, il peut fonctionner sans aucun plug-in externe.

La traduction chinoise de Canvas est "canvas". . Fonctions de traitement (dessin, transformation, traitement des pixels...).

Mais il convient de noter que l'élément canevas lui-même ne dessine pas de graphiques, il équivaut simplement à un canevas vide.

Si les développeurs ont besoin de dessiner des graphiques sur le canevas, ils doivent utiliser des scripts JavaScript pour dessiner.

1.2 Que peut faire la toile ?

Dessin de graphiques de base

Dessin de texte

Déformation de graphiques et synthèse d'images

Traitement d'images et de vidéos

Animation Implémentation de

Production de mini-jeux

1.3 Navigateurs pris en charge

La plupart des navigateurs modernes prennent en charge Canvas, tels que Firefox, Safari, Chrome, Opera récemment versions et IE9 sont pris en charge. >

IE8 et versions antérieures ne prennent pas en charge HTML5, mais nous pouvons inviter les utilisateurs à mettre à jour vers la dernière version

1.4 À propos du concept de base des balises canevas

dans Définition de l'élément canevas sur un La page HTML n'est pas différente de la définition d'autres éléments ordinaires. En plus de spécifier des attributs communs tels que l'identifiant, le style, la classe, le masqué, etc., elle peut également définir les attributs de largeur et de hauteur.

Pourquoi veux-tu parler de cela spécifiquement ?

Nous expliquerons en détail au chapitre 2.2.

De plus, après avoir défini l'élément canevas dans la page Web, il ne s'agit que d'une toile vierge. Si vous souhaitez dessiner sur la toile, vous devez suivre les étapes suivantes.

Récupérez l'objet DOM correspondant à l'élément canevas, qui doit être un objet canevas.

Appelez la méthode getContext() de l'objet canevas, qui renvoie un objet canevasRenderingContext2D, qui peut dessiner des graphiques.

Appelez la méthode de l'objet canvasRenderingContext2D pour dessiner.

Alors commençons notre pratique du canevas et voyons comment le canevas peut dessiner des graphiques.

2. Combat réel de Canvas

2.1 Vérifiez la prise en charge actuelle du navigateur pour Canvas

Nous avons également expliqué ci-dessus que certains de nos navigateurs ne prennent pas en charge Canvas. Que devons-nous faire ? cette fois?

À l'heure actuelle, nous pouvons écrire du contenu directement entre les balises Canvas. L'avantage est que lorsque votre navigateur ne prend pas en charge Canvas, nous pouvons afficher le contenu entre les balises, comme suit.

<!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>

Maintenant que le contenu spécifique a été créé, pouvons-nous le voir maintenant ?

Bien que nous n'ayons pas donné la largeur et la hauteur de la toile, notre toile est effectivement visible sur la page.

Il convient de noter que la largeur et la hauteur du style par défaut du canevas sont de 300px * 150px

Même si nous ne définissons pas la largeur et la hauteur spécifiques, il peut toujours être affiché.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La Geek Academy HTML5 propose de nouvelles fonctionnalités, le code source du didacticiel vidéo de baseArticle suivant：La Geek Academy HTML5 propose de nouvelles fonctionnalités, le code source du didacticiel vidéo de base

Articles Liés

Voir plus