Problèmes rencontrés : html/11467.html">La raison pour laquelle l'élément canevas est déformé et déformé
Il existe trois tailles pour un élément DOM : la taille du style, la taille html et la taille css.
Lors de l'utilisation de l'élément canevas, la largeur et la hauteur par défaut de l'élément canevas sont de 300 px * 150 px. La taille par défaut ici est la taille HTML.
Pour mieux comprendre, prenons la peinture comme exemple. Le plan de travail est de taille CSS ou de taille de style, et le canevas est de taille HTML.
Si nous n'affichons pas la taille html de l'élément de canevas spécifié, mais spécifions sa taille css dans le fichier css. Le résultat est très déroutant.
Par exemple, nous dessinons un cercle d'un rayon de 50 px sur un canevas par défaut de 300 px * 150 px.
<html lang=zh><head> <meta charset=UTF-8> <title>taille du canevas</title> <style> #canvas { largeur : 200px ; hauteur : 200px } </style></head>< body><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const canvas = document.getElementById(canvas); const ctx = canvas.getContext(2d); ctx.beginPath(); ctx.StrokeStyle = #aaaaaa; ctx.arc(100, 100, 0, 2 * Math.PI.); closePath(); };</script></body></html>Les résultats finaux affichés sont les suivants :
On constate que la taille de la toile est bien de 200*200. Mais le cercle s’est transformé en ellipse et la forme s’est déformée. Pourquoi est-ce ?
Que se passe-t-il si la taille définie par CSS est supprimée ?
On peut voir que le graphique est normal à ce moment. La taille de la toile est en effet la valeur par défaut de 300*150.
De la comparaison et de l’imagination, nous pouvons tirer les conclusions suivantes :
Dans un premier temps nous avons dessiné un cercle sur la toile de 300150. Une fois le dessin terminé, nous souhaitons modifier la taille de la toile à 200200. Dans le même temps, la toile est toujours la même et ne sera pas modifiée.
Ce qui fonctionne, c'est d'étirer la toile. En supposant que la toile ait une élasticité, alors une toile s'étire de 300 150 à 200 200. Le demi-axe majeur du cercle sur la toile devient 1,33 fois la taille d'origine et le demi-axe mineur devient 0,68 fois. À ce stade, le cercle est naturellement une ellipse.
en conclusion:Lorsque vous utilisez Canvas pour dessiner, afin d'éviter des problèmes inutiles, vous devez vous rappeler de définir la largeur et la hauteur de la taille HTML de l'élément Canvas.
RésumerCe qui précède est une brève analyse de l'impact de la taille html et de la taille css de l'élément canevas sur l'élément visuel introduit par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et. l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !
Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !