Récemment, en raison de besoins professionnels, j'ai découvert la balise Canvas en HTML.
Canvas est un nouveau composant de HTML5. Il s'agit d'un rideau sur lequel divers graphiques, animations, etc. peuvent être dessinés à l'aide de JavaScript.
Avant Canvas, le dessin ne pouvait être réalisé qu'à l'aide de plug-ins Flash, et les pages devaient utiliser JavaScript et Flash pour interagir. Avec Canvas, nous n’avons plus besoin de Flash et pouvons directement utiliser JavaScript pour réaliser le dessin.
Les problèmes ont commencé lorsque j'ai moi-même écrit un bonjour tout le monde après avoir regardé le didacticiel. Regardez le code ci-dessous :
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=width: 200px;height: 200px; border:1px solid black;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); ctx.moveTo(0, 0); ctx.lineTo(200, 200); ctx.AVC();</script></body></html>
La signification du code ci-dessus est de tracer une ligne droite sur un canevas d'une largeur et d'une hauteur de 200 px chacune. Le point de départ de la ligne droite est (0,0) et le point final est (200,200) ;
Cependant, l'image dessinée par le navigateur est :
Jetez un œil à cette photo ~ Pourquoi y a-t-il une telle pente ? Cela ne devrait pas être ~ Ce devrait être une ligne diagonale ~~
Plus tard, après avoir recherché des informations, j'ai découvert que lors de la définition de la largeur et de la hauteur de la balise canvas, il existe les méthodes et conséquences suivantes :
La largeur par défaut de l'élément Canvas est de 300 px et sa hauteur de 150 px. Pour définir sa largeur et sa hauteur, vous pouvez utiliser la méthode suivante :
Première méthode :
1 <largeur de la toile=500 hauteur=500$amp;>amp;$lt;/canvas>
Méthode 2 : Utiliser l'API HTML5 Canvas
1 var canvas = document.getElementById('l'identifiant du canevas à exploiter');
2 toile.largeur = 500 ;
3 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
1 #Pour utiliser l'identifiant du canevas{
2 largeur : 1 000 px ;
3 hauteur : 1 000 px ;
4 ｝
Inclut également style= dans les styles en ligne. Autrement dit, dans l'exemple ci-dessus, un étirement se produira également.
Méthode 2 : les opérations utilisant l'API HTML5 Canvas seront étendues
1 var canvas = document.getElementById('l'identifiant du canevas à exploiter');
2 toile.style.width = 1000px ;
3 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. Canvas affichera le pourcentage sous forme de valeur numérique
Par conséquent, à partir des informations ci-dessus, nous pouvons savoir que la raison est que le code de mon exemple ci-dessus étirera la largeur et la hauteur du canevas, rendant l'image incompatible avec les attentes.
Maintenant, j'ai réécrit un exemple de code pour définir correctement la largeur et la hauteur du canevas :
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px solid black;> Votre navigateur ne prend pas en charge l'élément canvas.</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.lineTo(200, 200); cxt.AVC();</script></body></html>
résultat:
Finition.
RésumerCe 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.