recherche

Maison  >  Article  >  interface Web  >  Que signifie la balise canevas html5 ? Introduction à l'utilisation de la balise canvas

Que signifie la balise canevas html5 ? Introduction à l'utilisation de la balise canvas

寻∝梦
寻∝梦original
2018-08-30 11:06:158734parcourir

Cet article vous présente principalement le dessin de la balise canvas en HTML5, explique la définition et le processus d'utilisation de base de la balise canvas html5, et ajoute quelques connaissances de base du style css et js pour rendre l'ensemble de l'article plus compréhensible. augmenté, mais il est toujours correct de suivre le code. Ensuite, jetons un coup d'œil à cet article

Tout d'abord, parlons de la signification de la balise canvas en html5 :

graphiques, tels que des graphiques et autres images.

La balise est simplement un conteneur graphique. Vous pouvez utiliser le canevas pour dessiner des chemins, des boîtes, des cercles, des personnages et ajouter des images de différentes manières.

Parlons maintenant de la façon d'utiliser le dessin de balisage html5 :

La plupart des API de dessin Canvas ne sont pas définies sur l'élément mais défini sur un objet "contexte de dessin" obtenu via la méthode getContext() du canevas.

L'API Canvas utilise également la représentation du chemin. Cependant, un chemin est défini par une série d'appels de méthodes, tels que des appels aux méthodes beginPath() et arc(), plutôt que d'être décrit comme une chaîne de lettres et de chiffres.

Une fois qu'un chemin est défini, d'autres méthodes, telles que fill(), opèrent sur ce chemin. Diverses propriétés de l'environnement de dessin, telles que fillStyle, décrivent comment ces opérations sont utilisées.

Remarque : L'une des raisons pour lesquelles l'API Canvas est très compacte est qu'elle ne fournit aucune prise en charge pour dessiner du texte. Pour ajouter du texte à un graphique , vous devez soit le dessiner vous-même et le fusionner avec une image bitmap, soit utiliser le positionnement CSS au-dessus du pour superposer le texte HTML.

Utilisation des balises html5 :

Définir des graphiques, tels que des graphiques et d'autres images. Mais la balise n'est qu'un conteneur graphique et un script doit être utilisé pour dessiner des graphiques. Les balises doivent généralement spécifier un attribut id (souvent référencé dans les scripts), des attributs de largeur et de hauteur pour définir la taille du canevas et utiliser l'attribut style pour ajouter des bordures

Par exemple, créez un rectangle ou un carré. . 

<!doctype html>
<html >
<head>
    <meta charset="UTF-8">
    <script type="js/index.js"></script>
    <title>php中文网之画图</title>
</head>
<body >
<canvas id="rectangular" width="200" height="100" style="border:3px solid #adadad;">
</canvas>
<canvas id="square" width="200" height="200" style="border:5px solid #ff88c2;"></canvas>
</body>
</html>

L'effet est tel que montré sur la figure :

Que signifie la balise canevas html5 ? Introduction à lutilisation de la balise canvas

Résumé de la balise canvas en html5 :

En termes simples, la toile HTML5 est un morceau de tissu utilisé pour dessiner, mais ce n'est pas un tissu ordinaire. C'est une chose magique semblable au stylo magique de Ma Liang, qui peut dessiner de nombreuses choses exquises et merveilleuses. Cet article présente deux effets intéressants basés sur Canvas, qui peuvent nous donner une compréhension plus intuitive du potentiel de Canvas.

Personnellement, je pense que Canvas a beaucoup de marge de développement. On peut prédire que si la vitesse Internet du pays peut suivre sans pression, il ne fait aucun doute que ce sera le monde du HTML. . Parce que dans la toile, dans la mesure où son imagination est illimitée, son espace de développement sera aussi large que possible. Bien sûr, le principe est que la technologie doit être excellente. Bien sûr, c'est une de mes conjectures, mais c'est indéniable. Le HTML est puissant, mais le plus gros problème à l'heure actuelle concerne les problèmes de compatibilité, et la vitesse du réseau est également une limitation majeure

[Recommandation de l'éditeur]

La balise html p peut-elle contenir la balise a ? Description du rôle de la balise html p

Comment utiliser une balise html ? Résumé de l'utilisation de la balise html a

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!

html5 css html 字符串 JS 对象 canvas
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：À propos de la différence entre la balise section et la balise div en HTML5 (exemples inclus)Article suivant：À propos de la différence entre la balise section et la balise div en HTML5 (exemples inclus)

Articles Liés

Voir plus