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 a également un attribut spécifique :
Par exemple, définissez le canevas suivant :
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 :