Tutoriel de dessin HTML5 Canvas (1) - Connaissance de base du dessin

Bien que tout le monde appelle Canvas une nouvelle balise pour HTML5 / "> HTML5, il semble que Canvas appartient à la nouvelle connaissance de la langue HTML, mais en fait, le dessin Canvas se fait via JavaScript. Par conséquent, si vous voulez apprendre le dessin Canvas, vous devez avoir une fondation javascript.

De plus, lorsque vous dessinez des images, il y a toujours des termes et des points de connaissance de l'imagerie, donc si vous avez de l'expérience dans la fabrication d'images ou d'art, il sera plus facile d'apprendre la toile.

Toile signifie toile. La toile dans HTML5 est vraiment très similaire à la toile de la vraie vie. Donc, le voir comme une toile tangible peut accélérer la compréhension.

Pour dessiner avec toile, tout d'abord, vous devez avoir une toile. Si vous n'avez pas de toile dans votre bibliothèque, vous pouvez acheter un jet et le mettre. Bien sûr, nous n'avons pas besoin de dépenser de l'argent sur la page Web, écrivez simplement une toile, similaire à:

<canvas id = "cvs"> Votre navigateur ne prend pas en charge Canvas </ Canvas>

Le texte de la balise concerne les navigateurs qui ne prennent pas en charge la toile, et ceux pris en charge ne seront jamais visibles.

Il est nécessaire de mentionner les caractéristiques de cette toile. Il a deux attributs natifs, à savoir la largeur et la hauteur. En même temps, car il s'agit également d'un élément HTML, il peut également utiliser CSS pour définir la largeur et la hauteur. Cependant, assurez-vous de prêter attention: sa propre largeur et sa taille sont différentes de la largeur et de la hauteur définies par CSS!

Nous utilisons JS pour changer la largeur et la hauteur de la toile, comme ceci:

Canvas.Width = 400

canvas.height = 300

Mais en utilisant JS pour changer la largeur et la hauteur de la toile en fonctionnant CSS, c'est comme ceci:

canvas.style.width = '400px'

canvas.style.height = '300px'

On peut voir que la différence grammaticale est très évidente. En fait, la différence est plus évidente.

Par exemple, pour une largeur de toile de 1000, vous tracez une ligne verticale sur le côté gauche de la toile, 100 pixels de large. À l'heure actuelle, vous définissez la largeur de la toile elle-même à 500, ce qui équivaut à cliquer sur la moitié droite de la toile, mais à l'heure actuelle, la largeur de la ligne verticale est toujours de 100.

Mais si vous utilisez CSS pour changer la largeur de la toile à 500, il équivaut à extruder la toile de 1000 à 500, de sorte que la largeur de la ligne verticale devient 50.

(Ce n'est qu'une situation théorique. Lorsque vous définissez réellement la largeur de la toile, il effacera le contenu dessiné.)

La largeur et la hauteur de la toile sont les attributs de la toile elle-même, et la largeur et la hauteur données par CSS peuvent être considérées comme une mise à l'échelle. Si vous évolue trop désinvolte, les graphiques sur la toile peuvent devenir méconnaissables pour vous.

Il y a donc une suggestion: sauf dans des circonstances particulières, n'utilisez pas CSS pour définir la largeur et la hauteur de la toile.

La toile l'a, et maintenant nous le retirons:

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

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

Maintenant que la toile est disponible, je veux le griffonner, bien sûr, j'ai également besoin d'un stylo. La méthode d'obtention d'un stylo est la suivante:

var ctx = cvs.getContext ('2d'); où la méthode GetContext est utilisée pour maintenir un stylo, mais il y a un autre paramètre ici: 2d. Qu'est-ce que cela signifie? Cela peut être considéré comme un type de pinceau.

Puisqu'il y a 2D, alors il y aura de la 3D? Il y aura probablement dans le futur, mais pas maintenant. Alors utilisons d'abord ce stylo 2D.

Alors, pouvons-nous mettre quelques stylos supplémentaires à perdre? La réponse est non.

Je veux poser une question: combien de stylos utilisez-vous en même temps lorsque vous dessinez des images? Je crois que 99,9% des personnes ne peuvent en utiliser qu'une. Bien que certains maîtres d'arts martiaux tels que Xiaolongnu puissent dessiner avec les deux mains en même temps, cela est très irréaliste pour les gens ordinaires, non?

Alors maintenant, vous pouvez vous sentir soulagé car la balise de canevas HTML5 ne prend également en charge que l'utilisation d'un stylo en même temps!

Certains étudiants qui connaissent JS voulaient être intelligents: j'utilise la méthode pour obtenir le pinceau de la manière précédente pour obtenir quelques stylos supplémentaires, ne suffirait-il pas? !

Par exemple:

var con = cvs.getContext ('2d');

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

Hahahaha, cela semble réussir. Je le pensais avant le test, mais en fait, ce n'est qu'une illusion!

Parce que j'ai trouvé que j'avais trempé l'un des stylos à l'encre rouge, et l'autre stylo a également été trempé automatiquement à l'encre rouge! Parce que les deux stylos en sont un! Putain.

Si vous devez dessiner différentes couleurs, le chemin est de continuer à tremper ce stylo unique dans une nouvelle couleur.

Ce n'est en fait pas un avantage, c'est un défaut, vous en faites l'expérience à l'avenir.

Le monde 2D est un avion. Pour déterminer un point sur un plan, deux valeurs, coordonnées x et y-coordonnées y sont nécessaires. Il s'agit d'un concept de base très important.

L'origine de la toile est le coin supérieur gauche, le même que Flash. Mais ce qui est si ennuyeux, c'est que l'origine en mathématiques est le coin inférieur gauche. Ce...

Tout d'abord, vous devez savoir quel type de modifications de coordonnées dessinera quelles lignes? Par exemple, si la coordonnée X devient plus grande et 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 existe également des lignes diagonales, des lignes diagonales gauche et des lignes diagonales droites. Si vous pouvez comparer les images, la plupart des gens peuvent les comprendre immédiatement; Il est plus déprimant de dessiner avec le code, et vous ne pouvez y penser que par la pensée logique.

Si vous vous sentez confus à propos des lignes maintenant, ne vous inquiétez pas, vous les comprendrez naturellement pendant le processus d'apprentissage.

Canvas a une fonctionnalité différente de la toile réelle, à savoir qu'elle est transparente par défaut et n'a pas de couleur d'arrière-plan. C'est très important la plupart du temps.