Tutoriel de dessin sur toile html5 (1) – Connaissance de base des compétences du didacticiel Drawing_html5

Bien que tout le monde appelle Canvas le nouveau label HTML5, il semble que Canvas soit une nouvelle connaissance du langage HTML, mais en fait, le dessin sur Canvas se fait via JavaScript. Par conséquent, si vous souhaitez apprendre le dessin sur Canvas, vous devez avoir une base Javascript.
De plus, lorsqu'il s'agit de dessin, il y a toujours des termes d'image et des points de connaissance, donc si vous avez de l'expérience en dessin ou en art, il sera plus facile d'apprendre Canvas.

Toile signifie toile. Le canevas en HTML5 est vraiment très similaire au canevas de la vraie vie. Le voir comme une toile physique peut donc accélérer la compréhension.

Toile
Pour peindre avec de la toile, il faut tout d'abord une "toile". Si vous n’avez pas de toile dans votre bibliothèque, vous pouvez acheter un rouleau et l’y mettre. Bien sûr, nous n'avons pas besoin de dépenser de l'argent pour l'acheter sur la page Web, nous pouvons simplement écrire une toile, semblable à :

Copier le code

Le code est le suivant :

/canvas>

Le texte de l'étiquette est destiné aux navigateurs qui ne prennent pas en charge Canvas, et ceux qui le prennent en charge ne pourront jamais le voir.
Il faut parler des caractéristiques de ce canevas. Il a deux attributs natifs, à savoir la largeur et la hauteur. En même temps, car c'est aussi un élément html, il peut aussi utiliser du css pour définir la largeur et la hauteur. Cependant, des dizaines de millions de Attention : sa propre largeur et sa hauteur sont différentes de la largeur et de la hauteur définies via CSS !
Nous utilisons JS pour modifier la largeur et la hauteur du Canvas, comme ceci :

Copiez le code

Le le code est le suivant :

canvas.width= 400
canvas.height = 300

Mais utiliser JS pour modifier la largeur et la hauteur du Canvas en opérant CSS est comme ceci :

Copier le code

Le code est le suivant :

canvas .style.width = '400px'
canvas.style.height = '300px'

On voit que la différence grammaticale est évidente. En fait, la différence est plus évidente.

Quelle est leur différence ?
Par exemple, sur un canevas d'une largeur de 1000 pixels, vous tracez une ligne verticale sur le côté gauche du canevas, de 100 pixels de large. À ce stade, vous définissez la largeur du canevas lui-même sur 500, ce qui équivaut à cliquer sur la moitié droite du canevas, mais la largeur de la ligne verticale est toujours de 100 à ce moment.
Mais si vous modifiez la largeur du canevas à 500 via CSS, cela équivaut à réduire le canevas de 1000 à 500, donc la largeur de la ligne verticale devient 50.
(Ceci n'est qu'une situation théorique, en pratique Lors de la définition de la largeur du canevas, le contenu dessiné sera effacé. )
La largeur et la hauteur du canevas lui-même sont les propriétés du canevas lui-même, et la largeur et la hauteur données par CSS peuvent être considérées comme Si la mise à l'échelle est trop simple, les graphiques sur la toile peuvent devenir méconnaissables.
Voici donc une suggestion : sauf circonstances particulières, n'utilisez pas de CSS pour définir la largeur et la hauteur du canevas.
La toile est là, maintenant retirons-la :

Copiez le code

Le code est le suivant :

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

Écoutez, c'est exactement la même chose que d'obtenir d'autres éléments.

Pinceau
Maintenant que vous avez la toile, si vous souhaitez graffitier dessus, il vous faut bien sûr un stylo. La méthode permettant à Canvas d'obtenir le stylo est la suivante :
var ctx = cvs.getContext('2d'); La méthode getContext est utilisée pour obtenir le stylo, mais il y a un autre paramètre ici : 2d. ? Vous pouvez voir que cette peinture est le type de pinceau.
Puisqu’il y a de la 2D, alors il y aura de la 3D ? Je suppose qu'il y en aura dans le futur, mais pas maintenant. Utilisons donc d'abord ce stylo 2D.

Alors on peut mettre quelques stylos supplémentaires en réserve ? La réponse est non.
Je veux poser une question : combien de stylos utilisez-vous en même temps lorsque vous dessinez ? Je crois que 99,9 % des gens ne peuvent en utiliser qu'un. Bien que certains maîtres d'arts martiaux comme Xiao Longnu puissent dessiner à deux mains en même temps, c'est très irréaliste pour les gens ordinaires, n'est-ce pas ?
Alors maintenant, vous pouvez vous sentir soulagé, car la balise canvas de html5 ne prend en charge que l'utilisation d'un seul stylo à la fois !
Certains étudiants plus familiers avec l'écriture en JS voudront peut-être jouer un tour : je peux utiliser la méthode précédente d'obtention de pinceaux pour obtenir quelques stylos supplémentaires, n'est-ce pas suffisant ? !
Par exemple :

Copier le code

Le code est le suivant :

var con = cvs .getContext('2d');
var ctx = cvs.getContext('2d');
Hahahaha, ça semble avoir fonctionné. Je le pensais avant de le tester, mais en fait ce n'était qu'une illusion !
Parce que j'ai découvert que lorsque je trempais l'un des stylos dans l'encre rouge, l'autre stylo était automatiquement trempé dans l'encre rouge ! Parce que les deux stylos ne font qu’un ! Putain.
Si vous avez besoin de dessiner des couleurs différentes, le moyen est de continuer à tremper ce seul « stylo » dans de nouvelles couleurs.
Ce n'est en fait pas un avantage, mais un défaut, dont vous vous rendrez compte à l'avenir.

Coordonnées
Le monde 2d est un plan Pour déterminer un point sur un plan, deux valeurs sont requises, la coordonnée x et la coordonnée y. Il s’agit d’un concept de base très important.
L'origine de la toile est le coin supérieur gauche, la même que celle du flash. Mais ce qui est ennuyeux, c'est que l'origine des mathématiques se trouve dans le coin inférieur gauche. Cela... ne peut être considéré que comme une habitude

Un peu de bon sens de base en matière de dessin
Tout d'abord, vous devez savoir quel type de changements de coordonnées dessinera quoi des lignes ? Par exemple, si la coordonnée x devient plus grande mais que la coordonnée y reste inchangée, une ligne horizontale peut être tracée ; si la coordonnée y change mais que la coordonnée x reste inchangée, une ligne verticale peut être tracée.
Bien sûr, il y a aussi des barres obliques, des barres obliques à gauche, des barres obliques à droite, etc. Si vous pouvez les comparer avec les images, la plupart des gens peuvent les comprendre d'un seul coup d'œil ; s'appuyer sur la pensée logique.
Ne vous inquiétez pas si vous vous sentez confus à propos des lignes maintenant, vous les comprendrez naturellement au fur et à mesure que vous apprenez.

Autres
Une caractéristique du canevas qui est différente du vrai canevas est qu'il est transparent par défaut et n'a pas de couleur d'arrière-plan. C’est très important la plupart du temps.