Explication détaillée de la différence entre largeur, hauteur et style dans la toile H5

Récemment, j'ai rencontré un petit problème lors de l'apprentissage des propriétés du canevas, à savoir la largeur et la hauteur du canevas. Je l'ai finalement résolu en recherchant des informations pertinentes, je vais donc partager le processus de solution avec vous, je ne dirai pas grand-chose ci-dessous. jetons un œil aux détails.

1. Lorsque vous utilisez l’attribut width height, l’affichage ne sera pas étiré normalement comme suit :

 <canvas id=mycanvas width=300 height=300>Le navigateur ne prend pas en charge Canvas, veuillez mettre à niveau ou utiliser un autre navigateur ! </canvas><script type=text/javascript> var canvas = document.getElementById(mycanvas), ctx = canvas.getContext('2d'); ctx.moveTo(0,0); .AVC();</script>

L'effet de course est le suivant, qui est une ligne diagonale

2. Lors de l'utilisation du style, l'image sera étirée (déformée).

 <style> #mycanvas { largeur : 150px; hauteur : 150px } </style>

Effet de l'opération

La toile est une planche à dessin et un morceau de papier à dessin. La planche à dessin est équivalente à un récipient. Le dessin/le travail se fait sur le papier à dessin.

La largeur et la hauteur par défaut de la planche à dessin et du papier à dessin sont de 300 x 150. Lorsque la largeur et la hauteur du papier à dessin et de la planche à dessin sont égales, l'image ne sera pas étirée lorsque la largeur et la hauteur du papier à dessin et. la planche à dessin est différente, l'image sera étirée (déformée).

1. Les attributs de largeur et de hauteur définissent la largeur et la hauteur de la planche à dessin et du papier à dessin.

Par exemple : width=300 height=300 signifie que la largeur et la hauteur de la planche à dessin sont de 300*300, et que la largeur et la hauteur du papier à dessin sont également de 300*300. L'image diagonale de 300*300 du travail ne sera pas. être étiré.

2. Seules la largeur et la hauteur de la planche à dessin sont définies dans le style. La largeur et la hauteur du papier à dessin sont toujours la valeur par défaut de 300*150.

(Prenez l'image ci-dessus comme exemple) Par conséquent, seule une partie de l'image diagonale 300*300 sur laquelle vous travaillez est dessinée sur le papier à dessin, comme suit :

Au fait, le papier à dessin ne laissera pas la planche à dessin vide, donc le papier à dessin et l'image doivent être étirés à la même taille que la planche à dessin. Dans cet exemple, la largeur du papier à dessin et la largeur du plan de travail sont toutes deux de 30, et la hauteur est la moitié du plan de travail, il vous suffit donc d'étirer la hauteur de deux fois, de sorte que l'image soit également étirée et amincie, le La direction X reste inchangée et la direction Y est doublée, nous obtenons donc une image déformée.

Concernant les paramètres de largeur et de hauteur de Canvas en HTML5

L'élément Canvas mesure par défaut 300 px de large et 150 px de haut. Pour définir sa largeur et sa hauteur, vous pouvez utiliser la méthode suivante (il ne sera pas étiré) :

Première méthode :

<largeur du canevas=500 hauteur=500></canvas>

Méthode 2 : utilisez l'API HTML5 Canvas pour fonctionner correctement

var canvas = document.getElementById('l'identifiant du canevas que vous souhaitez utiliser');

toile.largeur = 500 ;

toile.largeur = 500 ;

Si la largeur et la hauteur sont définies par la méthode suivante, l'élément Canvas sera étiré de sa taille d'origine à la largeur et à la hauteur définies :

Méthode 1 : l'utilisation de CSS étirera le

#Pour exploiter l'identifiant du canevas{

largeur : 1 000 px ;

hauteur : 1 000 px ;

｝

Méthode 2 : les opérations utilisant l'API HTML5 Canvas seront étendues

var canvas = document.getElementById('l'identifiant du canevas que vous souhaitez utiliser');

toile.style.width = 1000px;

toile.style.hauteur = 1000px;

Méthode 3 : L'utilisation de $(#id).width(500) de jquery sera étirée ;

Autres : La largeur et la hauteur de la toile ne peuvent pas être exprimées en pourcentage. le canevas affichera le pourcentage sous forme de valeur numérique

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que le contenu de cet article aura une certaine valeur de référence pour les études ou le travail de chacun. Si vous avez des questions, vous pouvez laisser un message de communication. Merci pour votre soutien à VeVb Wulin. Réseau.