Tutoriel vidéo HTML5 Backend.com

"Backend.com HTML5 Video Tutorial" est une technologie importante aujourd'hui et dans le futur. Bien apprendre le HTML5 vous permettra non seulement de développer des interfaces WEB frontales et de concevoir des pages Web pouvant s'adapter à des appareils de différentes tailles ; vous permettra même d'utiliser la technologie HTML5 pour développer Develop Hybird App (une application hybride pour Android/iOS/Windows Phone et d'autres appareils) ; ou d'utiliser la technologie HTML5 pour développer des programmes de bureau (voir le projet Node Webkit, veuillez utiliser Github).

Adresse de lecture du cours : http://www.php.cn/course/469.html

Le Style d'enseignement de l'enseignant :

Les cours de l'enseignant sont simples et approfondis, de structure claire, analysés couche par couche, imbriqués, rigoureux dans l'argumentation et rigoureux dans la structure. Il utilise le pouvoir logique de la pensée. pour attirer l'attention des étudiants et contrôler le processus d'enseignement en classe. En écoutant les cours de l'enseignant, les étudiants acquièrent non seulement des connaissances, mais reçoivent également une formation à la réflexion, et sont également influencés et influencés par l'attitude académique rigoureuse de l'enseignant

Le point le plus difficile de cette vidéo est HTML5 Canvas :

1. Qu'est-ce que Canvas

canvas est une balise fournie par HTML5 pour afficher les effets de dessin

canvas fournit une zone graphique vierge qui peut utiliser du JavaScript spécifique. API pour dessiner des graphiques (canvas 2D ou WebGL)

Introduit pour la première fois par Apple pour le tableau de bord OS X et le navigateur Safari

1.1 Quelques notes sur Canvas

canvas est un zone rectangulaire de toile sur laquelle il est possible de peindre à l'aide de JavaScript. Contrôlez chaque pixel.

La balise canvas utilise JavaScript pour dessiner des images sur la page Web et n'a pas la fonction de dessin elle-même.

Canvas propose de nombreuses façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images.

Standard Canvas :

Le dernier standard

Standard de version stable

À l'heure actuelle, le standard est encore en cours d'amélioration. Premièrement, l'utilisation de la première API suffit pour compléter toutes les applications

1.2 Principaux domaines d'application de Canvas (compréhension)

1 Jeux : Canvas est plus tridimensionnel et plus sophistiqué que Flash en termes. En termes d'affichage d'images sur le Web, les jeux sur toile sont meilleurs en termes de fluidité et de multiplateforme.

2. Données visualisées (graphiques de données), telles que : echart de Baidu, d3.js, three.js

3. Bannière publicitaire : Flash était autrefois une époque glorieuse, et les smartphones ne l'étaient pas. Pourtant, il existait. Aujourd'hui et dans l'ère future des smartphones, la technologie HTML5 peut jouer un rôle énorme dans les bannières publicitaires, et utiliser Canvas pour obtenir des effets publicitaires dynamiques est parfait.

4. Future

Simulateur : peu importe en termes d'effets visuels ou de fonctions de base, le produit du simulateur peut être entièrement implémenté par JavaScript.

Contrôle informatique à distance : Canvas permet aux développeurs de mieux mettre en œuvre la transmission de données sur le Web et de créer une interface de contrôle visuel parfaite.

Éditeur graphique : L'éditeur graphique de Photoshop sera 100 % basé sur le Web.

1.3 Objectifs du cours

Apprendre à utiliser l'API de base du canevas et à utiliser le canevas pour réaliser des dessins simples

Réaliser la visualisation des données

2. Balise Canvas

<canvas width="600" height="400"></canvas>

Fonction : affiche le contenu du dessin, mais ne peut pas dessiner

Compatibilité Canvas 2.1

<canvas width="600" height="400">

Seuls les navigateurs IE9 et supérieurs peuvent prendre en charge la balise Canvas
Astuce : votre navigateur ne prend pas en charge Canvas, veuillez mettre à jour le navigateur

2.2 Définir les points d'attention en largeur et en hauteur

1 Vous pouvez utiliser les attributs HTML/DOM les attributs width et height sont utilisés pour définir

2 À ne pas faire : utiliser les styles CSS pour définir la largeur et la hauteur

Utiliser des attributs pour définir la largeur et la hauteur équivaut en fait à augmenter les pixels du canevas
Largeur et hauteur par défaut : 300*150, ce qui signifie : 300 pixels dans le sens horizontal et 150 pixels dans le sens vertical
L'utilisation d'attributs pour définir la largeur et la hauteur augmente ou diminue les pixels du canevas et en utilisant le style CSS, aucun pixel n'est ajouté, chaque pixel est juste agrandi !

2.3 Dessin

Utilisez l'API de dessin fournie en JavaScript pour dessiner

Chaque toile dispose d'un ensemble d'API de dessin (outils)

2.3 .1 Étapes de base du dessin

1 Trouver le canevas

2 Obtenir le contexte de dessin (une série de collections API) via le canevas

3 Utiliser l'API pour dessiner les éléments requis graphiques

// 1 找到canvas
var cv = document.getElementById("canvasId");
// 2 拿到canvas绘图上下文
var ctx = cv.getContext("2d");
// 3 使用上下文中的API绘制图形
ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
ctx.stroke();           // 描边

Remarque :

getContext("2d"), le paramètre `2d` fait référence à l'obtention du contexte pour dessiner des graphiques plats

Si vous souhaitez dessiner trois- ; graphiques dimensionnels, vous devez transmettre les paramètres d'entrée : "webgl"

Type de contexte 2D : CanvasRenderingContext2D

Obtenir le contexte webgl : (comprendre)

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!