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 : //m.sbmmt.com/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 Canvas2.1 Vérifiez la prise en charge actuelle du navigateur pour CanvasNous 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>
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!