Introduction à l'utilisation de l'élément canevas de HTML5 (dessiner des rectangles, des polylignes, des cercles) _ Compétences du didacticiel HTML5

Canvas fait généralement référence à Canvas. Récemment, je me suis davantage intéressé à l'utilisation de HTML5 pour écrire des jeux, j'ai donc simplement utilisé Canvas.

J'ai déjà utilisé Canvas dans Silverlight et wpf. Dans Silverlight, Canvas est un conteneur positionné de manière absolue, et n'importe quel contrôle peut être placé à l'intérieur. Nous pouvons créer des canevas, des applications graphiques, des applications SIG, etc. grâce à lui.

En HTML5, canvas est une nouvelle balise :

Il possède tous les attributs de la balise html de base et vous pouvez également définir des styles pour celle-ci.

Il a également un attribut spécifique :

La hauteur et la largeur ici sont les mêmes qu'avant. Les attributs de la balise html sont différents, et ils sont également différents de la hauteur et de la largeur en termes de style. Cela fait principalement référence à la plage de coordonnées dans le canevas. La largeur et la hauteur font référence à la taille d'affichage réelle de la toile.

Par exemple, définissez le canevas suivant :

Dessinez ensuite un rectangle sur toile avec des coordonnées de 100 et 50 et des tailles de 200 et 150. Vous verrez l'effet réel comme indiqué ci-dessous :

La taille de la toile dans l'image est déterminée par le style 600px * 450px, mais les coordonnées pour remplir toute la toile ne sont que de 400*300, correspondant à la taille entre parenthèses.

Le dessin dans Canvas est basé sur des coordonnées, donc les coordonnées de 100, 50 sont converties en coordonnées d'écran de 150px, 75px, et la taille du rectangle est également convertie de 200*150 à la taille d'écran de 300px*225px.

Vous pouvez l'essayer vous-même en suivant le code ci-dessous :