Que signifie toile ?

Que signifie toile ?

Canvas en anglais signifie "canvas", mais le Canvas mentionné ici est un nouvel élément HTML5, sur lequel les développeurs peuvent dessiner une série de graphiques. La méthode d'écriture de Canvas dans les fichiers HTML est très simple :

<canvas id="canvas" width="宽度" height="高度"></canvas>

L'attribut id peut être utilisé par tous les éléments HTML. Les seuls attributs fournis avec Canvas sont les deux derniers (qui contrôlent respectivement la largeur et la hauteur), et il n'y en a pas d'autres. Quant à la compatibilité, CanIUse indique que les fonctions de base sont actuellement prises en charge par 90 % des navigateurs utilisés par les utilisateurs, donc dans la plupart des cas, elles peuvent être utilisées en toute confiance.

Notez que vous devez utiliser les attributs width et height fournis avec Canvas, et n'utilisez pas CSS pour le contrôler, car le contrôle CSS entraînera la déformation du Canvas. Vous pouvez essayer de le comparer avec PhptpShop. Ce dernier modifie la "taille de l'image", tandis que le premier est la bonne façon de modifier la "taille du canevas". Par exemple, l'image suivante est un collage horizontal de trois images : la boîte noire la plus à gauche est l'image originale d'une taille de 50 px * 50 px ; celle du milieu est l'effet du changement de la taille de l'image à 100 px * 100 px. mais pour l'image elle-même, on dit que la plage de coordonnées n'est pas devenue plus grande ; celle la plus à droite est la bonne toile de 100 px * 100 px.

La plupart des méthodes de dessin de Canvas n'ont rien à voir avec la balise et nécessitent JavaScript pour fonctionner dessus. Il s'agit de ce qu'on appelle l'API Canvas.

Nous obtenons d'abord cet élément :

var canvas = document.getElementById('canvas');

Ensuite, utilisez une méthode pour obtenir l'entrée qui peut appeler toutes les API Canvas :

var ctx = canvas.getContext('2d');

Êtes-vous impatient de penser à 2D lorsque vous tu vois ? Y a-t-il de la 3D ? Il n'existe pas de méthode d'écriture 3D, mais si vous souhaitez ouvrir la porte au monde 3D, vous pouvez écrire canvas.getContext('webgl'). Cependant, WebGL est un ensemble de standards basés sur OpenGL ES 2.0, qui est complètement différent de cet article, il ne sera donc pas abordé ici.

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!