Commentaire: Canvas signifie toile. Bien que tout le monde appelle Canvas une nouvelle balise pour HTML5, il semble que Canvas appartient à la nouvelle connaissance de la langue HTML, en fait, le dessin de toile est réalisé via JavaScript. Donc, si vous voulez apprendre le dessin de toile, vous devez avoir une fondation JavaScript
Bien que tout le monde appelle Canvas une nouvelle balise pour HTML5, il semble que Canvas appartient à la nouvelle connaissance de la langue HTML, en fait, le dessin de toile se fait via JavaScript. Donc, 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.
toile
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 à:
<Hisecles> Votre navigateur ne prend pas en charge le canevas </ 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.
Remarque: il est nécessaire de mentionner les caractéristiques de cette toile. Comme IMG, 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 noter que sa propre largeur et sa hauteur sont différentes de la largeur et de la hauteur définies via CSS!
Nous utilisons JS pour changer la largeur et la hauteur natives 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.
Quelle est la différence entre eux?
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 native 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.
brosse
Maintenant que la toile est déjà 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');
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 en aura probablement dans le futur, mais pas maintenant. Alors utilisons d'abord ce stylo 2D.
! Alors, pouvons-nous mettre quelques stylos de plus à 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.
coordonner
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. C'est un concept de base très important, mais comme tout le monde a appris les mathématiques, je n'en parlerai pas beaucoup.
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...
autre
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.