Quelles sont les méthodes de dessin en HTML5

Méthode de dessin en HTML5 : 1. Utilisez Canvas, qui est basé sur des pixels, fournit des fonctions de dessin 2D, s'appuie sur HTML et dessine des motifs via des scripts. 2. Utilisez des graphiques vectoriels SVG, qui fournissent une série d'éléments graphiques, adaptés à affichage d'images statiques, scénarios d'application pour la visualisation et l'impression de documents avec une haute assurance.

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

Il existe deux méthodes de dessin en html5 : Canvas et SVG.

Canvas et SVG sont tous deux recommandés et principaux Technologies de dessin graphique 2D en HTML5

Qu'est-ce que Canvas

• <canvas> est un nouveau composant de H5, comme un rideau, un HTML dans lequel vous pouvez utiliser des scripts (généralement Javascript) pour dessiner des graphiques. Il peut être utilisé pour créer divers graphiques, tableaux ou certaines animations. <canvas>是H5新增的组件，就像一块幕布，可以使用脚本（通常为Javascript）在其中绘制图形的HTML元素，他可以用来制作各种图、表，或者一些动画。
• Canvas 技术比较新，注重栅格图像处理。

什么是SVG？

• SVG是一套独立的矢量图形语言，成为W3C标准已经有十几年，
• 基于可扩展标记语言XML 出来的

区别：

• Canvas 基于像素，提供 2D 绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图案；

• SVG为矢量图，提供一系列图形元素（Rect，Path，Circle，Line...）

  La technologie Canvas est relativement nouvelle et se concentre sur le traitement des images raster.

• Qu'est-ce que SVG ?

• SVG est un langage de graphiques vectoriels indépendant qui est un standard du W3C depuis plus de dix ans
  est basé sur le langage de balisage extensible XML

Différences :

Canvas est basé sur des pixels et permet un dessin 2D. fonctions. C'est un type d'élément HTML qui s'appuie sur HTML et ne peut dessiner des motifs que via des scripts ;

SVG est une image vectorielle et fournit une série d'éléments graphiques (Rect, Path, Circle, Line.. .);Il existe également un mécanisme complet d'animation et de temps, qui peut être utilisé indépendamment ou intégré dans HTML.
Le canevas est rendu pixel par pixel. Une fois le graphique dessiné, le navigateur n'y prêtera plus attention.
SVG est affiché via la manipulation DOM.
Comparaison des fonctions :
Canvas fournit des fonctions plus originales, un rendu dynamique et un dessin de gros volumes de données

• Dépend de la résolution

Ne prend pas en charge les gestionnaires d'événementsCanvas est pixel- par pixel Pour le rendu, une fois le graphique dessiné, le navigateur n'y prêtera plus attention, donc la capacité de rendu du texte est faible

• L'image résultante peut être enregistrée au format .png ou .jpg

• Canvas est le plus adapté à de nombreux objets qui doivent être des jeux à forte intensité graphique fréquemment redessinés

• Convient aux petites zones et à un grand nombre de scènes

SVG a des fonctions plus complètes, adaptées à l'affichage d'images statiques, à haute résolution. scénarios d'application de visualisation et d'impression de documents garantis ;

• Ne dépend pas de la résolution

Prend en charge les gestionnaires d'événements

🎜SVG est affiché via la manipulation DOM, le plus adapté aux applications avec de grandes zones de rendu (telles que Google Maps) 🎜🎜🎜🎜Haute complexité Ralentissez la vitesse de rendu (toute application qui utilise excessivement DOM n'est pas rapide)🎜🎜🎜🎜SVG ralentira la vitesse de rendu dans les applications de jeu complexes en raison des opérations DOM. Il ne convient pas aux applications de jeu🎜. 🎜🎜🎜Convient aux grandes et petites zones Nombre de scènes. Il est fortement recommandé de privilégier le SVG pour le rendu sur les plateformes mobiles. 🎜🎜🎜🎜Recommandations associées : "🎜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!