Qu'est-ce que le canevas HTML5

canvas est une balise fournie par HTML5 pour afficher les effets de dessin. La balise "" fournit une zone graphique vierge (une zone rectangulaire de toile) et une API JavaScript spécifique est requise pour dessiner des graphiques.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

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 une API JavaScript spécifique pour dessiner des graphiques (canvas 2D ou WebGL)
Tout d'abord Introduit par Apple pour le tableau de bord et le navigateur Safari de l'OS 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 dispose de plusieurs méthodes pour dessiner des chemins, des rectangles, des cercles, des personnages et ajouter des images.

1.2 Principaux domaines d'application de Canvas (comprendre)

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

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

3) Bannières publicitaires : À l'ère glorieuse du Flash, les smartphones n'étaient pas encore apparus. 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) Futur

Simulateur : Que ce soit en termes d'effets visuels ou de fonctions de base, les produits de simulation peuvent être entièrement implémentés 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.

2. Introduction à la balise Canvas

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

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

2.1 Compatibilité du canevas

<canvas width="600" height="400">
    IE9及其以上版本的浏览器，才支持canvas标签
    提示：您的浏览器不支持canvas，请升级浏览器
</canvas>

2.2 Notes sur le réglage de la largeur et de la hauteur

1) Vous pouvez utiliser l'attribut html/DOM attribut largeur et hauteur à définir

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

Utilisez des attributs pour définir la largeur et la hauteur, ce qui équivaut en fait à augmenter les pixels du canevas

Largeur et hauteur par défaut : 300*150, ce qui signifie : direction horizontale Il y a 300 pixels et 150 pixels dans la direction verticale

L'utilisation d'attributs pour définir la largeur et la hauteur augmente ou diminue les pixels du canevas

L'utilisation du style CSS n'augmente pas les pixels, mais ; ne fait qu'agrandir chaque pixel !

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), trouvez la toile 2 ) Obtenez le contexte de dessin (une série de collections API) via Canvas

3) Utilisez l'API pour dessiner les graphiques requis

// 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();           // 描边

Tutoriel recommandé : "

Tutoriel vidéo 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!