Soyez créatif avec la toile HTML5

1. Bienvenue !: Bienvenue sur le cours HTML5 Canvas, où vous allez du débutant à être créateur pleinement confiant dans les graphismes et les animations en utilisant le Canvas. m'appelle Chris, et je suis là pour vous guider étape par étape. J' ai de nombreuses années d'expérience dans le développement de sites Web et la création cours en ligne avec des milliers d'étudiants et des centaines de critiques cinq étoiles. Ce cours a été conçu pour un débutant pour vous apprendre comment dessiner sur le Canvas en utilisant JavaScript. À la fin de ce cours, vous aurez la confiance et la capacité de dessiner ou d'animer presque tout ce que vous pouvez imaginer, et de l'afficher dans des pages Web, ou dans un navigateur Web. Vous passerez pas à pas des bases de Canvas jusqu'à des techniques plus avancées telles que les transformations, les animations, l'enregistrement et l'installation, ainsi que la façon de manipuler les données de pixel dans les images. Nous commençons par configurer le Canvas et vous présentons le script de base dans les techniques de dessin. Nous allons jeter un oeil aux lignes et bouffées et comment dessiner une forme très. Je vais vous montrer comment ajouter du texte et des images au Canvas, supprimer des sections du Canvas ainsi que l'ajout beaux effets tels que des dégradés, des motifs et des ombres. fur et à mesure que vous progressez dans le cours, nous progresserons encore plus loin en regardant des techniques plus avancées, nous examinerons différents types de courbes, les méthodes de sauvegarde et de restauration, et comment utiliser les transformations. Vous apprendrez également à utiliser des boucles, des animations, et même à modifier les données de pixels des images pour nous permettre d'ajouter des effets tels que faire des photos en noir et blanc. Nous finissons en vous laissant avec un défi, dessinons le visage de Mickey Mouse. Mettons vos nouvelles compétences en pratique. L' étudiant idéal de ce cours est quelqu'un qui a une expérience de conception Web ou de développement, et qui cherche à apprendre une nouvelle forme de compétence. Learning Canvas est également idéal pour tous ceux qui cherchent à créer des jeux basés sur navigateur. Une petite expérience des bases JavaScript serait un avantage lorsque vous vous déplacez dans ce cours. Cependant, il n'y a pas d'autres exigences, en prenant ce cours, juste besoin d'apprendre. N' hésitez pas à consulter la description du cours ainsi que la Toile de la conférence pour découvrir tout ce que vous apprendrez de ce cours. Appuyez sur le bouton Prendre ce cours, et j'ai hâte de vous voir à l'intérieur du cours. 2. Qu'est-ce que la toile HTML5 ?: Ok, les gars. Tout d'abord, avant de commencer à dessiner quelque chose sur le Canvas, je veux juste prendre un ou deux moments juste pour jeter un coup d'oeil rapide ce que nous pouvons faire avec HTML5 Canvas et ce qu'est exactement le Canvas. Donc, fondamentalement, le Canvas est un élément HTML. Tout comme la plupart des balises HTML, telles que les balises de paragraphe, nous avons une ouverture et un élément de fermeture. Donc, contrairement à la balise image, par exemple, ce n'est pas une balise auto-fermante. Nous n'avons donc pas besoin de la balise d'ouverture, puis de la balise de fermeture avec la barre oblique avant. C' est une zone rectangulaire d'une page web que nous pouvons utiliser pour dessiner. Pour nous permettre de dessiner, nous utilisons un langage de script, qui est généralement JavaScript, mais des langages de script peuvent être utilisés. Mais pour le reste de ce cours, nous utiliserons JavaScript comme c'est le langage le plus populaire utilisé avec le Canvas. Si vous avez besoin d'aide avec des tutoriels ou des références en ligne, presque tous sont basés sur JavaScript et finalement, le Canvas a été ajouté en HTML5. C' est donc assez nouveau, mais il est assez bien supporté. Jetons un coup d'oeil à une ou deux choses que nous pouvons faire avec le Canvas. Donc, comme nous l'avons mentionné précédemment, nous pouvons utiliser le Canvas pour dessiner. Nous pouvons dessiner des objets tels que des rectangles, des cercles, des lignes droites et des arcs, et beaucoup des différents types de graphiques dans lesquels nous allons entrer au fur et à mesure que nous progresserons dans le cours. Nous pouvons même dessiner du texte sur le Canvas. Nous pouvons ajouter du texte simple ou nous pouvons à différentes polices différentes, différentes couleurs. Nous pouvons ajouter des dégradés et même animer ce texte. Le Canvas peut également être utilisé pour ajouter des images et ses différentes techniques de manipulation d'images, que nous examinerons au fur et à mesure que nous progresserons dans le cours. Nous allons également jeter un oeil sur diverses animations sur diverses transformations au cours du cours. Il y a beaucoup de faits cool que vous pouvez ajouter tels que des rotations et vous pouvez appliquer certaines de ces animations pour réellement créer des jeux. Beaucoup de jeux n'est pas vraiment couvert dans ce cours. Beaucoup de techniques que nous allons utiliser peuvent ensuite être appliquées aux jeux si c'est quelque chose sur lequel vous voulez progresser. Enfin, nous pouvons également des motifs, des dégradés et des ombres aux graphiques et au texte pour rendre ce look vraiment bon. Donc, j'ai mentionné avant que le Canvas a une ouverture et une étiquette de fermeture, et aussi que le Canvas est assez bien repéré maintenant. Mais équipez-vous simplement pour les navigateurs pris en charge. Entre ces deux balises, nous pouvons ajouter du texte brut. Faites simplement savoir à l'utilisateur que le Canvas n'est pas pris en charge dans son navigateur et peut-être un message juste pour lui demander de mettre à jour vers un navigateur plus récent. Nous pouvons donc l'utiliser comme une chute de secours sur les navigateurs pris en charge. Encore une fois, comme beaucoup d'éléments HTML, nous pouvons également ajouter des attributs à la balise d'ouverture Canvas. Beaucoup d'entre eux seront très familiers si vous avez fait un peu de HTML dans le passé. Cet exemple a un ID, que nous allons utiliser tout au long de ce cours pour cibler le Canvas. Cet exemple a une largeur et l' attribut height pour définir la taille du Canvas que vous souhaitez utiliser, et nous pouvons également ajouter un attribut de style, ajouter des éléments tels que des couleurs d'arrière-plan et des bordures. Regardons ce qu'est le HTML5 Canvas, certaines choses que nous pouvons l'utiliser pour. Passons maintenant à la vidéo suivante. Je vais réellement commencer à configurer le Canvas. 3. Les bases de la toile : configurer la toile: Je veux commencer dans cette vidéo en faisant une configuration de base de Canvas. Je vais travailler pour cette vidéo et pour le reste de ce cours dans CodePen, qui est disponible sur codepen.io. Comme vous pouvez le voir, CodePen est un terrain de jeu pour le web frontal. Fondamentalement, ce que nous pouvons faire sur l'utilisation de CodePen, c'est que nous pouvons avoir un éditeur de texte en ligne, où nous pouvons utiliser notre code. Également à côté d'un écran partagé, nous pouvons également avoir une fenêtre de navigateur qui affiche les résultats de notre code. On va faire ça dans ce qu'on appelle un stylo. Un stylo est juste sa propre zone autonome, comme nous pouvons créer un site Web à l'aide d'un stylo. Je vais également utiliser des stylos pour chaque section de ce cours, juste pour que toutes les différentes zones soient contenues et que vous puissiez les utiliser pour référence future. Bien sûr, si vous ne voulez pas utiliser CodePen, vous pouvez utiliser un éditeur de texte basé sur un bureau et aussi un navigateur Web, alors n'hésitez pas à faire cette route si vous préférez. Mais pour le reste de ce cours, je vais utiliser CodePen. Si CodePen est quelque chose que vous n'avez pas utilisé auparavant, cliquez sur le bouton « S'inscrire » en haut à droite, puis suivez le simple processus d'inscription pour créer un compte. CodePen est livré avec un coût mensuel si vous voulez utiliser l'un des comptes pro. Cependant, tout ce dont vous avez besoin pour le reste de ce cours est de vous inscrire à l'un des plans gratuits. Allez-y et cliquez sur S'inscrire pour eux. Vous devez appuyer sur le bouton « Connexion ». Je vais juste me connecter à mon compte et donc, commencer par configurer le Canvas. Je vais cliquer sur « Nouveau stylo ». Lorsque vous commencez, il s'agit de l'écran que vous voyez. Vous pouvez avoir une mise en page légèrement différente. La flèche blanche que vous pouvez voir sur le côté droit, sera la zone où nous pouvons voir les résultats de notre code. Effectivement, ce sera le navigateur web. J' ai une section HTML, une section CSS et une section JavaScript. Pour cette vidéo, je vais juste me concentrer dans la section HTML. Je vais juste réorganiser ça juste pour avoir plus de place là-dedans. Ensuite, je vais juste cliquer sur le stylo et ensuite l'appeler « Configuration de la toile ». Alors je vais sauver ça pour commencer. La première chose que je veux faire dans la section HTML est de créer un squelette HTML de base. C' est agréable et facile à faire dans CodePen. Si vous tapez htlm:5. Nous pouvons utiliser les commandes ML et l'onglet Hit, puis cela crée une inférence d'échelle HTML5 pour commencer. Je le mettrais directement au titre des documents. Je vais juste appeler ça de la même façon, « Mise en place de la toile ». Maintenant, on est bien d'aller dans la section du corps. Nous savons à partir de la dernière vidéo, que le HTML5 Canvas a les balises Canvas. Nous avons la balise Canvas d'ouverture, et nous avons aussi la balise de fermeture avec la barre oblique avant. Commencez par ces deux-là, puis ajoutons quelques attributs à l'intérieur de la balise Canvas ouverte. Nous savons que nous pouvons dessiner des graphiques avec le Canvas à l'aide de scripts. Je mentionnerai que nous allons utiliser JavaScript pour le reste du cours. Nous allons lier le script au Canvas en faisant référence à l'ID du Canvas, que vous allez maintenant définir comme attribut. Donnez un ID au Canvas et vous l'appelez comme vous voulez, mais je vais simplement l'appeler « MyCanvas ». Si nous sauvegardons cela, nous remarquerons à droite, qu'il n'y a pas de toile dessinée sur l'écran. C' est parce que les balises Canvas telles qu'elles sont, en fait, ne dessinent rien par défaut. Juste pour qu'on puisse voir sous le titre, je vais juste y ajouter un peu de style. Ce n'est que des styles CSS standard. Je vais juste ajouter une couleur à l'arrière-plan. Commençons par balise dans le Canvas, puis ajoutez un arrière-plan. Je vais rendre le mien rouge. On y va. C' est le Canvas qui apparaît sur l'écran. Nous pouvons voir qu'il y a un rectangle rouge apparaître. En effet, par défaut, la largeur du Canvas est de 300 pixels de large avec une hauteur par défaut de 150 pixels. Bien sûr, nous ne pouvons pas changer cela dans les attributs. Nous pouvons ajouter une largeur de 300 pixels et ajouter une hauteur de 300 pixels. Maintenant, vous pouvez voir que nous avons un joli Canvas carré pour commencer, puis enfin, pour les navigateurs non pris en charge, ajoutons le texte de secours que nous avons regardé dans la dernière vidéo. Nous allons commencer par le message de votre navigateur, il ne prend pas en charge le HTML5 Canvas. Veuillez envisager de mettre à jour ou de modifier votre navigateur pour une meilleure expérience. Juste comme ça. Vous pouvez voir si nous enregistrons le stylo dans le texte, qui sera juste placé à l'intérieur, il n'apparaît pas réellement dans le canevas sur le côté droit. C' est parce que notre environnement de démonstration repère complètement le Canvas, mais bien sûr, il est recommandé de laisser cela là pour les personnes qui n'ont pas de navigateur à jour. Maintenant, nous avons les bases de la configuration de la toile, maintenant, passons à la vidéo suivante, nous allons trouver un dessin. 4. Les bases de la toile : scripter et dessiner des rectangles: Maintenant, nous avons la configuration de base de la toile sur l'écran. Nous allons maintenant passer à l'ajout de scripts, et en fait dessiner des rectangles sur le canevas. La première chose que nous voulons faire est que nous avons dit qu'il y avait un petit message d'erreur en bas. Je vais d'abord commencer en cliquant dessus. Vous pouvez voir que le CodePen n'a pas besoin d'une déclaration doctype, donc je vais juste supprimer cela, juste pour me débarrasser de ce message, puis enregistrer. Bien sûr, assurez-vous que cela est laissé dans si vous utilisez sur un éditeur de texte sur un navigateur Web distinct, ou en fait, si vous déployez sur le Web, assurez-vous qu'il est conservé à l'intérieur. Pour cette vidéo, je vais créer un nouveau stylo, et nous pouvons soit créer un nouveau stylo de la même manière que la dernière vidéo, soit nous pouvons simplement cliquer sur la fourchette. Cela va créer des doublons. Nous pouvons ensuite renommer ces doublons, ce qui nous évitera de taper tout le squelette HTML encore et encore. Je vais appeler ce script et dessiner des rectangles, ajouter la même chose dans le titre, et faire un peu plus d'espace là-bas. La première chose que nous devons faire pour accéder au script est de créer les balises de script. Alors faites sauter la toile, je vais à l'administrateur, juste là. Alors ouvrez les balises de script, et puis nous avons besoin d'une balise de fermeture, et c'est juste comme utiliser JavaScripts standard. Nous avons utilisé JavaScript dans le passé, beaucoup de choses que nous allons faire dans ce cours sembleront assez familières. Si ce n'est pas le cas, ne vous inquiétez pas, vous devriez être capable de suivre très bien. Nous allons commencer par saisir la toile par l'ID. Je vais le stocker dans une variable appelée canvas. Donc, créez la variable avec le nom de canevas, et je vais saisir l'ID de mon canevas en sélectionnant le document.getElementById. Assurez-vous simplement que les éléments, par, et ID ont un couple de moins. L' élément que nous allons attraper est ma toile. Donc, entre parenthèses, puis à l'intérieur du type de guillemets dans MyCanvas, alors nous allons finir avec un point-virgule. Cette section saisit le canevas par l'ID, puis stocke dans une variable appelée canevas. Je vais créer une variable de plus appelée ctx, c'est court pour le contexte. C' est parce que nous allons accéder au contexte de rendu du canevas, et cela nous permet de dessiner sur le canevas. Nous faisons cela en appelant la méthode canvases GetContext. À l'intérieur de cette variable, nous allons sélectionner le canevas, qui est créé puis point, puis appeler getContext, suivi des crochets, et un point-virgule. Ce cours nous allons nous concentrer sur les graphismes 2D. Donc, à l'intérieur des parenthèses en tant que paramètre, nous allons ajouter 2D à l'intérieur de là, et cela spécifiera que nous voulons créer un contexte de rendu bidimensionnel. Je vais utiliser une variable ctx beaucoup tout au long du cours. Maintenant que nous avons le contexte ou la variable ctx, nous pouvons maintenant l'utiliser pour accéder aux propriétés de dessin en l'utilisant. Je vais supprimer les propriétés de style pour l'ajouter dans la dernière vidéo, et je vais les ajouter dans divers scripts. Prenez la variable ctx, puis nous allons utiliser la méthode fillStyle avec un S majuscule, et le style sera la couleur que nous voulons définir. C' est une couleur CSS, donc je veux l'appeler rouge. Nous pouvons utiliser le nom de la couleur, ou nous pouvons utiliser la valeur x, ou vous pouvez même utiliser des dégradés, ou des mots, que nous examinerons plus tard dans le cours. Utilisons effectivement cette couleur, et remplissons le rectangle. Encore une fois, nous devons utiliser le point contextuel, et cette fois fillRect, qui est bien sûr un rectangle. Maintenant, à l'intérieur des parenthèses de la méthode FullRect, nous allons ajouter quatre paramètres différents. Je vais juste ajouter 0, 0, 300, 300. Les deux premiers paramètres, le zéro et le zéro, sont la position à laquelle nous aimerions commencer le rectangle sur le canevas. Donc, 0 x et 0 y, les deux premières valeurs, sont le coin supérieur gauche du canevas. Nous allons regarder plus sur les coordonnées dans la prochaine vidéo, mais pour l'instant, nous avons juste besoin de savoir que la position 0, 0, est une coordonnée dans le coin supérieur gauche, et puis vous avez probablement déjà deviné que le 300, 300, est la largeur et la hauteur du rectangle. Nous avons créé un rectangle de la même taille que le canevas, et plutôt que des coordonnées dures avec une valeur particulière, nous pouvons également utiliser JavaScript pour les faire correspondre la même largeur et à la même hauteur que le canevas. Nous changeons cela pour être toile, et c'est la toile .width, et nous faisons la même chose avec les hauteurs. Donc canvas.height, et alors nous devrions obtenir le rectangle apparaître exactement comme il était avant. Maintenant, je vais juste créer un ou deux rectangles ou carrés de plus juste pour jouer avec. Nous allons saisir le contexte, et encore une fois, saisir la méthode fillStyle. Je veux définir cette fois pour être une valeur hexagonale, alors utilisez le hashtag, et je vais utiliser 00ff99. Ce style ne fait rien jusqu'à ce que nous créions réellement un rectangle. Donc CTX.fillrect. Comme avant, nous allons commencer ça dans le coin supérieur gauche. Donc 0, 0, et cette fois nous voulons faire la moitié de la largeur, et la moitié de la hauteur de la toile. En utilisant JavaScript, nous pouvons le faire à nouveau. Plutôt que de toile, la largeur que nous avons obtenue dans le dernier exemple, nous allons utiliser canvas.width sur deux, puis la même chose pour les hauteurs, canvas.height sur deux, ou divisé par deux. Cela devrait faire un joli carré ici dans le coin supérieur gauche, soit la moitié du poids et la moitié de la hauteur de la toile originale. Ajoutons un de plus, juste dans une position légèrement différente. Remplissons le style à nouveau, cette fois avec une couleur différente. Je vais choisir cc99ff, puis remplir rectangle. Cette fois, nous voulons le définir pour être un 150 pixels, et c'est la position de départ au centre du carré parce que c'est la moitié de la largeur et la moitié de la hauteur de la toile. Je vais le faire de la même taille qu'avant, donc la largeur de la toile diviser par deux, canvas.height diviser par deux, parce que nous avons de belles casseroles vers le bas pour fusionner dans le navigateur. C' est bien si vous voulez réellement remplir le rectangle comme nous l'avons fait avec une couleur spécifiée, mais si une fois en fait juste pour dessiner un rectangle montrant juste le contour sans couleur de remplissage, nous pouvons le faire en utilisant la méthode StrokeRect. Encore une fois, commençons par ctx, puis nous utilisons StrokeRect. Dessinons l'extérieur ou le contour d'un rectangle. Donc, faites cette position de temps 25, 25, et ce qui en fera un joli simple 100 par 100 carré. Là, nous pouvons voir que nous avons le rectangle ou le contour des carrés. Bien sûr, la seule différence entre dessiner un carré ou un rectangle en utilisant FullRect et StrokeRect, c'est simplement la largeur et la hauteur que nous spécifions à l'intérieur des parenthèses. Donc, nous pourrions facilement changer cela pour être un peu plus large, puis transformer le carré en un rectangle. C'est ça. J' espère que vous avez apprécié votre premier goût de script à l'aide de la toile, et comment dessiner des rectangles et des carrés. N' hésitez pas à jouer un peu avec ça, et je vous verrai dans la prochaine vidéo. 5. Les bases de la toile : comprendre les coordonnées de la toile: Dans la dernière vidéo, nous allons dessiner des rectangles et des carrés sur le Canvas. Vous avez été présenté à quelques coordonnées de base de Canvas. Nous voulons juste prendre quelques instants maintenant juste pour regarder les coordonnées Canvas plus en détail. Comprendre le fonctionnement des coordonnées vous aidera vraiment à progresser dans ce cours. Sachez déjà que 0,0 est le coin supérieur gauche de la toile. Si nous imaginons que cette grille est le Canvas et chaque petit carré contenu dans la grille est d'un pixel. Parce que nous utilisons le contexte 2D, nous avons à la fois l'axe x et l'axe y. L' axe des x s'étend horizontalement sur le Canvas, tandis que l'axe y s'exécute verticalement. Nous aurons la position 0, 0 dans le coin supérieur gauche représenté par le petit point. Lorsque la valeur x est augmentée, nous courons horizontalement sur le Canvas. Si nous passons sur quatre pixels, c'est les points de départ du carré, donc x est égal à quatre. Parce que les points de départ du carré ne sont qu'un pixel du haut. Cela rend la valeur y égale à un. C' est exactement la même chose que nous avons regardé dans la dernière vidéo, où nous avons réglé la position 0, 0 du premier rectangle. Ensuite, nous définissons le deuxième rectangle, ou le deuxième carré pour commencer au centre de la toile pour créer un carré dans le coin inférieur droit. Nous avons fixé la position x et y à 150 sur 150, ce qui était exactement à mi-chemin au milieu de la toile. Être capable d'obtenir votre main autour de ces coordonnées à un stade précoce vous aidera vraiment au fur et à mesure que vous progressez dans le cours. Il vaut vraiment la peine de savoir que, en particulier, l'axe y dans la géométrie traditionnelle et dans différentes industries, une valeur y positive, augmenterait en fait. Alors que dans le Canvas, toutes les valeurs positives pour y vont verticalement vers le bas de la Canvas. Si vous venez d'un arrière-plan particulier où les coordonnées sont faites d'une manière différente, faites attention à cela. J' espère que ça a du sens. Maintenant, nous allons passer à la création d'autres dessins. 6. Les bases de la toile : lignes et chemins: Dans cette vidéo, nous allons jeter un oeil aux lignes et chemins que nous pouvons faire en utilisant le canevas HTML. Commençons par fourchette dans la dernière vidéo, et je vais changer le nom pour être simplement des lignes et des chemins, ils sont les mêmes avec le titre. Ensuite, nous allons supprimer tout entre les balises de script sauf les deux premières variables que nous avons créées. Nous allons en avoir besoin dans toutes les vidéos que nous faisons, nous pouvons les laisser tels qu'ils sont. Commençons par un exemple simple de la façon de dessiner des lignes et nous allons le faire en créant un carré, en dessinant les quatre côtés individuellement. Encore une fois, nous allons travailler avec le contexte, donc ctx.. Nous allons commencer par utiliser la méthode BeginPath, et nous avons juste besoin de laisser les parenthèses vides là-dessus, cela spécifie juste le début d'un nouveau chemin. Maintenant, avant de commencer à dessiner juste avant de commencer à ajouter le carré, je vais juste ajouter une bordure pour que nous puissions voir le contour de la toile. Définissons le style pour être égal à la bordure, et faisons-le 2 pixels pour que nous puissions le voir sur une ligne pleine. Revenons notre toile, retour à vous BeginPath et ensuite CTX.moveto. C' est notre position de départ que nous voulons tirer notre ligne de démarcation. Je veux définir le stylo à 10 pixels sur l'axe des x, et aussi 10 pixels dans ou 10 pixels vers le bas sur l'axe des y. Cela déplacera efficacement le stylo quelque part ici, et ce sera notre position de départ. Ensuite, pour dessiner une ligne, nous utilisons CTX.lineTo, puis nous devons ajouter nos deux coordonnées que nous allons vouloir tracer la ligne entre. Le premier que nous allons ajouter est l'axe des x de 290, et l'axe des y de 10. Vous remarquez que rien n'est encore apparu à l'écran, c'est parce que pour que cela dessine réellement de la même manière que la vidéo rectangles où nous avons dû utiliser le trait et le remplissage, nous devons faire la même chose pour la ligne. CTX.Strok, cela va caresser le contour. La ligne commence à la position x-10, y-10, nous choisissons 10 pixels, puis nous allons déplacer 290 ou passer à la position 290 qui est ici et garder également cette position de 10 pixels sur l'axe Y. Continuons maintenant avec une deuxième ligne 2 CTX.lineTo. Nous voulons garder le stylo à 290, gardons-le là, mais nous voulons le laisser tomber sur l'axe des y jusqu'à 290. Je vais obtenir une ligne verticale droite, et j'espère que vous pouvez voir une marge de motif, ctx.lineto. Maintenant, nous devons revenir à la première position x, qui était 10 et garder l'axe y à 290. La troisième ligne, terminons ça en revenant à la position 10, 10. C' est notre point de départ et ensuite nous créons un carré complet. Renvoyer la ligne aux coordonnées d'origine est un moyen de compléter le carré, il y a un moyen beaucoup plus facile de le faire. Commentons cette ligne avec deux barres obliques, cette ligne ne sera pas rouge. Au lieu de cela, parce que nous utilisons la méthode BeginPath au début, nous pouvons enfermer un chemin en utilisant CTX.ClosePath. Ensuite, cela reviendra à la position de départ d'origine et complétera le carré. C' est ainsi que nous dessinons un carré en utilisant un trait. Si vous voulez que les carrés aient un remplissage de couleur, nous pouvons changer ctx pour être rempli, puis nous obtenons la couleur remplie avec le noir par défaut. Nous pouvons changer la couleur par défaut pour être tout ce que nous voulons en utilisant la méthode de style de remplissage comme nous l'avons utilisé pour les rectangles. Continuons en dessinant de nouvelles formes, dessinons un triangle. Commençons par créer un nouveau chemin. Je vais commencer le chemin du triangle, puis déplacer le stylo à la position de départ. Pour avoir cela à l'intérieur du carré de 10 pixels supplémentaires, nous aurons la position de départ cette fois réglée sur 20, 20, et créons les premières lignes, CTX.lineto. Pour faire passer la première ligne à travers le haut pour le début du triangle, nous devons faire la position 10 pixels pour chaque croix. C' était 300 pour le contour de la toile, 290 pour le bord de la place. Apportons 10 pixels de plus et faisons cela 280, et la position Y peut rester à 20. Ensuite, pour en faire un triangle égal, nous devons le déplacer vers le bas à la position 20 sur l'axe des x, et une valeur Y pour le rendre égal à 280 ce qui est fondamentalement le contraire à celui-ci ctx.lineto, la valeur X de 20, la valeur Y de 280. Ensuite, pour revenir en haut, fermons simplement le chemin en utilisant CTX.ClosePath, puis pour faire apparaître cela, nous allons ajouter ctx.fill. On ne voit pas le triangle apparaître sur la toile. C' est parce que la couleur de remplissage par défaut que nous avons mentionnée précédemment est également noire, qui se fond dans la même couleur que le carré. Avant de le remplir, nous pouvons ajouter un FillStyle, et nous allons définir la couleur pour être la valeur hexagonale à nouveau de 99ccff. On peut voir le triangle se détacher sur le fond. Ajoutons un triangle de plus, mais cette fois nous allons ajouter un trait plutôt qu'un remplissage. Je vais juste copier ce triangle et juste ajouter ceci ci-dessous. Bien sûr, plutôt que ctx.fill, nous allons utiliser stroke. Changons le FillStyle pour être rouge, juste pour que nous puissions voir sur le fond bleu. Décalons-le du premier triangle, mettons-le à la position de départ de 40, 40. Toutes les années 20 peuvent être changées à 40, et pour le rendre égal, nous allons changer 280 pour être 230, et devrait faire un joli triangle uniforme. En fait, cela veut être StrokeStyle, parce que vous utilisez un trait plutôt qu'un remplissage. C' est donc notre couleur rouge pour le contour. Juste avant de terminer cette vidéo, je veux juste vous montrer quelques méthodes différentes pour les tirets de ligne, ils sont setLineDash et getLineDash. Pour utiliser le setLineDash nous pouvons ajouter ceci au dernier triangle. Je vais juste l'ajouter avant les lignes que j'ai réellement dessinées, ajoutons simplement ceci ci-dessous BeginPath. Nous allons utiliser à nouveau la variable de contexte, donc ctx, c'est setLineDash. Assurez-vous d'utiliser des majuscules pour chaque mot à part le premier. Ensuite, nous devons ajouter quelques valeurs à l'intérieur des parenthèses, nous devons réellement ajouter un tableau. Nous allons les utiliser avec les crochets, ouvrir les crochets comme ça. Pour commencer avec un simple LineDash, je vais ajouter deux valeurs différentes, 10 ajouter 10. Cela fait un simple LineDash qui mesure 10 pixels de large. Qui est défini par la première valeur, puis un écart de 10 pixels entre chacune des lignes. Si vous voulez que ces lignes soient plus éloignées, nous pouvons changer la deuxième valeur, comme ça. Ces valeurs sont juste en boucle jusqu'à ce qu'il atteigne la fin de la ligne. Nous pouvons ajouter plus de deux valeurs, nous pouvons ajouter un nombre impair. Si nous changeons cela pour 10, 20, 30, les trois valeurs bouclent simplement jusqu'à la fin de la ligne. Jetons un coup d'oeil aux tirets de ligne. On peut voir si on commence ici, il y a une première ligne de 10 pixels, un espace de 20 pixels, puis une troisième ligne de 30 pixels. Puis revenons au début, nous avons un écart de 10, une ligne de 20, et un écart de 30, c'est 10, 20, 30 à nouveau, et ainsi de suite jusqu'au début. Enfin, je veux juste vous montrer rapidement GetLineDash. GetLineDash est quelque chose que vous n'avez peut-être jamais d'utilité, mais je vais vous montrer comment l'utiliser juste au cas où. Sous le setLineDash, je vais créer une nouvelle variable, et cette variable va commencer dans les détails du lineDash. Je vais juste l'appeler quelque chose de pertinent tel que LineDashPattern, puis quand je mets cela en contexte. et la méthode que nous devons utiliser à la place de SetLineDash est GetLineDash. Je vais commencer à l'intérieur de cette variable, ouvrons la console et faisons un journal de console, console.log et ensuite la chose que nous voulons journaliser est cette variable. Ajoutons cela à l'intérieur, et puis je vais ouvrir la console qui est juste en bas là, cliquez dessus. Il y a notre tableau des valeurs de retour pour le lineDash. On a 10, 20, 30, et c'est répété. Encore une fois, c'est quelque chose dont vous n'aurez peut-être jamais besoin, mais c' est là juste au cas où vous en auriez besoin. Merci, et je te verrai dans la prochaine vidéo. 7. Les bases de la toile : largeurs de lignes et correspondance en pixels: Bienvenue de retour. Dans cette vidéo, je vais vous montrer comment changer la largeur de la ligne, ou l'épaisseur des lignes. Je vais aussi jeter un oeil à l'important concept de beaucoup en pixels. Pour commencer, nous allons juste fourcher la dernière vidéo, qui était des lignes et des chemins. Une fois que c'est fait, on changera le nom. Largeurs de ligne et correspondance avec les pixels, je vais juste copier cela, et coller cela dans le titre, juste comme ça. Ensuite, nous pourrions supprimer certaines des parties inutiles du script dont nous n'avons pas besoin. Pour cette vidéo, nous n'avons pas besoin du carré original, donc je vais supprimer la première section. Nous pouvons également supprimer le premier triangle. Nous quitterons le troisième triangle, mais nous allons enlever les tirets de ligne. Supprimez donc la ligne définie, la ligne pointillée, la variable, ainsi que le journal de la console. Alors nous sommes prêts à y aller. Sauve ça. Nous devrions juste être laissés avec un contour du triangle rouge. Il a changé la largeur d'une ligne de trait, c'est assez simple à faire. Nous devons utiliser ctx, la méthode que nous utilisons est lineWidth. Je vais définir une valeur, disons à une valeur initiale de un, et voir ce qui se passe. Nous n'avons aucune différence, alors essayons d'augmenter cela à 10, et voyons ce qui se passe. Nous obtenons également une ligne beaucoup plus grande, ou une ligne beaucoup plus large, que nous avions auparavant. Nous allons le rendre encore plus visible, alors passons à 26. C' est à peu près tout ce que nous avons à faire pour changer la largeur de la ligne. C' est vraiment aussi simple que ça. Mais un concept plus important, qui est un peu plus difficile à saisir, est beaucoup en pixels. Parfois, nous ne faisons pas grand-chose aux pixels correctement, nous pouvons nous retrouver avec des lignes floues. Juste pour vous montrer un exemple, je vais copier ce triangle que nous venons d'utiliser, puis coller dans un second triangle. Mais cette fois, nous allons changer la LineWidth pour être une valeur impaire de 25. Juste pour compenser le triangle afin que nous puissions voir la différence, changer toutes les 40 à 80, et toutes les valeurs de 230 à 270. Alors, sauvegardez ça. Maintenant, nous devons décaler les triangles. L' un a une largeur de 26 pixels et l'autre est de 25. Juste pour vous montrer ce que je veux dire, je vais juste zoomer, dans le navigateur, et j'espère que vous pouvez voir ça à la maison. Sinon, il devrait être un peu plus facile à voir sur votre propre ordinateur. Le deuxième triangle que nous venons de créer, a un contour floue. Le premier, que nous avons dessiné, a un contour net et net. Jetons un coup d'oeil à pourquoi c'est. Pour vous aider à comprendre exactement pourquoi cela se produit, j'aimerais jeter un oeil aux deux exemples. Le premier sur le côté gauche, est une grille Canvas simple, avec une ligne verte, la ligne verte est d'un pixel de large. Il est dessiné sur l'axe des x, sept pixels de travers. La ligne rouge indique le centre de la ligne. À partir de zéro, si nous allons sur sept pixels, ont été prises directement au centre de la ligne verte que nous avons dessinée. Comme la ligne verte n'a qu'un pixel de largeur, le Canvas dessine un demi-pixel vers la gauche, puis un demi-pixel vers la droite. Comme vous pouvez le voir, cela ne remplit pas un pixel entier, si nous regardons les grilles carrées sur l'arrière-plan. Ensuite, ce qui se passe est la toile dessine ou se remplit, le reste du pixel avec une nuance partielle. Il s'agit de l'effet floue que vous pouvez voir dans l'exemple précédent. Tout ce que nous devons faire pour rendre la ligne beaucoup le pixel, est de jeter un oeil à l'exemple sur la droite. Plutôt que la position de départ à sept, nous la changeons à 6,5. Verticalement, la ligne centrale est à mi-chemin entre les pixels, ce qui provoque alors la largeur de la ligne pour prendre la pleine taille du pixel, et par conséquent, aucune ombrage supplémentaire comme cet exemple n'est nécessaire. Par conséquent, nous avons des lignes nettes, aucun effet floue à l'extérieur. Une telle chose que je voulais que vous pensiez, et que vous soyez conscients, lorsque vous dessinez des lignes ou des formes sur le Canvas. Merci et au revoir pour l'instant. 8. Les bases de la toile : coins et onglet: Cette vidéo est tout au sujet des coins et des mitres. Créons un nouveau stylet pour cette vidéo par [inaudible] la dernière. Ensuite, comme d'habitude, il suffit de changer le titre pour être coins et miters et le même dans le titre HTML. Créons un peu plus d'espace. Ensuite, pour cet exemple, je vais juste quitter le premier triangle de la dernière vidéo, puis me débarrasser de la seconde. On y va. Le triangle que nous avons sur l'écran a des coins pointus. Nous pouvons changer cela en utilisant diverses propriétés. Nous pouvons ajouter des coins arrondis sur les coins biseautés, ainsi que ces coins à onglets que vous pouvez voir par défaut. La façon de faire est d'utiliser le context.lineJoin, puis nous pouvons définir le type de jointure que nous voulons utiliser pour chacun des coins. Le premier que je vais ajouter est rond, puis sauvegardez cela. Nous pouvons voir que les bords sur les coins libres du triangle ont maintenant un bord arrondi beaucoup plus doux pour eux. Nous pouvons également changer les coins arrondis pour être un biseau. Cela ajoute beaucoup plus d'un effet carré à chacun des trois côtés. La troisième propriété, que nous pouvons ajouter est l'onglet, et l'onglet est les valeurs par défaut que nous avons commencé avec. Cela ne fera pas vraiment de changements par rapport au triangle d'origine, nous sommes juste avec les trois coins pointus. Si l'effet d'onglets est ce que vous recherchez, vous n'avez pas besoin d'ajouter cette ligne comme valeur par défaut. C' est trois styles que vous pouvez ajouter aux coins. Ensuite, je veux vous montrer comment utiliser LineCap. LineCap est une technique que vous pouvez utiliser pour modifier le style des extrémités de la ligne. Pour le démontrer, je vais juste enlever les deux dernières lignes du triangle. Fais juste ça en ligne droite. Ensuite, nous pouvons changer LineJoin pour être LineCap. La valeur par défaut est le bout et ce n'est que les bords carrés que nous voyons sur une ligne standard. Il se place sur chacune des extrémités et est le style par défaut si rien d'autre n'est spécifié. Nous pouvons également les changer pour être rondes, tout comme avec l'exemple du triangle, que nous venons de regarder. Nous avons un joli coin arrondi à chacune des extrémités de la ligne. Maintenant, le dernier est le carré. En utilisant un carré, vous pouvez ne pas remarquer beaucoup de différence et semble en fait assez similaire à la crosse que nous venons de regarder auparavant, qui est la valeur par défaut. Cependant, lorsque vous utilisez le carré, cela rend la ligne un peu plus longue car un carré est ajouté à chaque extrémité de la ligne. Le carré s'étend sur la moitié de la largeur de la ligne, donc il le rend un peu plus long à chaque extrémité. Ce n'est qu'une différence subtile, mais il vaut la peine de garder à l'esprit si vous avez besoin de contrôler la longueur de la ligne. C' est ainsi que vous utilisez LineJoin et LineCap. La troisième et dernière technique que nous voulons jeter un oeil dans cette vidéo, est comment utiliser le MITERLimit. Regardons quelques diapositives pour mieux comprendre. J' ai créé un croquis pour vous donner une meilleure compréhension de la miterLimit avant d'entrer dans n'importe quel code. Devant vous est deux coins différents avec des angles différents. Comme vous pouvez le voir, ces différents angles créent une longueur d'onglets différente. Des points intérieurs aux points extérieurs, la longueur est beaucoup plus large sur cet exemple que sur la gauche. Nous pouvons effectivement avoir le contrôle de la longueur de cette mitre en utilisant la miterLimit. Nous pouvons contrôler la longueur de l'onglets si nous le voulons en utilisant miterLimit. Si la longueur de l'onglets est plus longue que la miterLimit, que nous avons définie, le coin, comme vous pouvez le voir sur le bon exemple, est alors biseauté ou effectivement coupé. Nous pouvons l'utiliser pour prendre le contrôle de la longueur de nos mitres. Revenons à CodePen et mettons-en pratique. Pour cet exemple, nous avons juste besoin d'ajouter une autre ligne. Il suffit de faire cela dans un coin, alors créez un lineTo. Je vais faire 30 100$. Je devrais jouer autour de ça pour avoir un bon coin. Je vais faire les 250 et 70. Je vais juste changer les x et y pour que le stylo passe à 30 et 30. Maintenant, rendons la largeur de ligne juste un peu plus petite, changez cela pour 10. Nous pouvons voir le plein angle ou le coin complet maintenant à l'écran. Nous n'avons pas besoin du LineCap de l'exemple précédent non plus. Ok, la première chose que nous devons faire est de définir la LineJoin pour être le type d'onglets. Ajoutons ça maintenant. LineJoin est égal à mitre, alors nous pouvons ajouter le miterLimit juste en dessous. Nous allons juste commencer par la valeur de 10. 10 est en fait la valeur par défaut. Vous ne remarquerez aucune différence en définissant cette valeur sur 10. On a un long bord tranchant là-dedans, un coin pointu. Essayons de réduire cela à cinq et voyons ce qui se passe. La valeur de 5 est inférieure à la longueur du coin, il est donc maintenant défini pour être une extrémité biseautée. Nous pouvons l'utiliser pour limiter la netteté d'un coin. C' est ainsi que nous pouvons utiliser des coins et des mitres avec la toile. Nous passons maintenant à la prochaine vidéo où nous allons jeter un oeil aux arcs et aux cercles. 9. Les bases de la toile : arcs et cercles: En partant des coins et des mitres de la dernière vidéo, nous allons maintenant jeter un coup d'œil aux arcs et aux cercles. Créons un nouveau CodePen pour cela. Alors fork la dernière vidéo, puis créons un titre d'arcs et de cercles. Je vais lire tous les scripts sauf le canevas et les variables de contexte, donc nous allons commencer à nouveau à l'intérieur de cela. Avant de commencer à écrire un code, regardons quelques diapositives pour mieux comprendre comment utiliser arc. C' est la méthode de l'arc et cela prend divers paramètres. Pour commencer, nous avons les propriétés X et Y et celles-ci sont au centre de l'arc. Donc, juste au milieu de l'arc ou du cercle que nous voulons créer. La troisième propriété est le rayon de sorte que le rayon est la distance entre le centre et l'extérieur du cercle. Ensuite, nous avons l'angle de départ et l'angle de fin. Nous devons comprendre que l'arc utilise des radians plutôt que des degrés. Donc seulement horizontal ou l'axe X, c'est la position de départ ou zéro. C' est effectivement à 3 heures. Puis un quart du tour, ce sera 0,5 fois pi. À mi-chemin tour serait une fois pi, 1,5, puis deux fois pi serait une rotation complète ou un cercle complet. Le dernier paramètre est l'endroit où nous voulons que l'arc soit dessiné dans le sens des aiguilles d'une montre ou dans le sens antihoraire. Il s'agit d'une valeur booléenne qui est définie sur true ou false. Donc, par défaut, il est réglé dans le sens des aiguilles d'une montre. Si nous définissons cela comme vrai, nous pourrions alors changer cela pour être dans le sens inverse des aiguilles d'une montre. Dans cet exemple, l'angle de départ serait zéro. On voudrait qu'il aille dans le sens inverse des aiguilles d'une montre jusqu'à 0,5. fois pi pour l'angle d'extrémité. Si vous voulez déterminer ce que sont les radians par rapport aux degrés, il y a des calculatrices en ligne, alors donnez juste un google rapide et vous serez en mesure de trouver ce dont vous avez besoin. Revenons maintenant à CodePen et jetons un coup d'oeil à quelques exemples. Commençons par créer notre premier arc. Je vais commencer par un chemin. Ensuite, créons l'arc, donc ctx.arc. Nous ajoutons les paramètres à l'intérieur des parenthèses, tout comme nous l'avons vu dans les diapositives auparavant. Les deux premières valeurs sont le centre de l'arc. Je vais faire mon centre intérieur de la toile. Donc 150,150 alors le rayon que je vais faire le mien 80. La position de départ, la mienne va être mise à zéro. Puis l'angle de fin, je vais faire le mien une fois math.pi. La position de départ de zéro est terminée dans la position de trois heures. Nous avons la position d'arrivée pour être une fois math.pi, ce qui est fini à la position de 9 heures. Pour dessiner cela, nous avons juste besoin d'ajouter le trait ou le remplissage. Donc ctx. coup juste pour nous donner le contour, donc nous y sommes parce que c'est par défaut dans le sens des aiguilles d'une montre. Il tourne dans le sens des aiguilles d'une montre. Si nous voulons que ce soit l'inverse, nous pouvons le changer pour qu'il soit vrai. Ensuite, nous observerons l'arc qui tourne dans le sens antihoraire. Nous pouvons également remplir la section de l'arc en utilisant ctx.fill. Il y a un noir par défaut que nous avons vu dans les vidéos précédentes. Bien sûr, nous pouvons changer le style de remplissage, si c'est quelque chose que vous voulez faire. Si nous voulons créer le cercle complet, comme nous l'avons regardé précédemment, nous avons juste besoin de changer l'angle d'extrémité pour être deux fois pi et cela crée un cercle complet. J' essaie de le changer pour l'instant. Ensuite, je vais jeter un oeil à ArcTo et ArcTo peuvent être un peu plus difficiles à comprendre. Jetons un coup d'oeil à un bon exemple que j'ai trouvé en ligne. Ceci est disponible à l'adresse rgraph.net. Si vous effectuez une recherche pour rgraph et aussi la fonction ArcTo, vous devriez pouvoir trouver cet exemple interactif. Pour comprendre ArcTo, nous devons être conscients qu'il y a plus qu'un angle de début et de fin. Nous commençons par le P0, qui est juste en bas dans le coin inférieur gauche. On peut bouger ça si on veut. Nous allons commencer par définir P0, qui est la position de départ, en utilisant MoveTo. Nous définissons ensuite la valeur de P1, qui est un point où ces deux lignes se rencontrent. P2 est alors la position de fin. Ensuite, nous utilisons lineTo pour continuer avec la ligne verticalement jusqu'au point de terminaison. C' est un excellent exemple parce que nous pouvons déplacer n'importe lequel de ces points et nous avons une meilleure compréhension de la façon dont tout fonctionne. Revenons à CodePen et créons un exemple pour nous-mêmes. Toujours dans les balises de script, nous allons créer un nouveau chemin. Commençons le Chemin. Juste en dessous du dernier exemple. En fait, nous allons créer un peu plus d'espace pour jouer avec, alors faisons la largeur à 600 juste pour que nous puissions presser les deux sur. On va bouffer. Ensuite, la première chose que nous devons faire est de créer un point de départ afin ctx.moveto. La position à laquelle nous allons commencer est X, 300 puis Y, 150 donc créer un point de départ, qui est effectivement P0. Ensuite, je vais continuer la ligne avec un lineTo. Le point que je voudrais définir la lineTo est 400,150. Ajoutons le trait pour que nous puissions voir les lignes au fur et à mesure que nous les dessinons. Il y a notre position de départ. Maintenant, nous déplaçons la ligne sur 100 pixels. Nous avons LineTo. Ensuite, créons la méthode ArcTo. Créons les coordonnées, qui sont pour P1, qui est juste ici. Je vais mettre le mien à 500,150 donc cela crée alors la position imaginaire P1. Ensuite, parce que nous voulons que la ligne s'arrondisse et descende sur l'axe Y, nous allons la faire 500, puis descendre à 300, puis un rayon de 75. Ensuite, pour étendre la ligne jusqu'à la position d'arrivée, qui est 500,300, vous venez d'étendre la ligne avec un lineTo de 500,300 et il y a notre ARCto compléter. Pour récapituler, nous avons déménagé à la position 300 150, qui est ici. Nous avons ensuite créé une ligne de 100 pixels [inaudible] à travers laquelle une ligne traverse horizontalement. Nous avons ensuite créé l'ArcTo de sorte que la première valeur de 500 150 est la position P1 imaginaire, qui est ici. Donc, parce que nous voulons que l'arc tourne ensuite, nous allons ensuite baisser la valeur Y à 300 et 500,300 est la position d'arrivée, qui est en bas. Nous avons ensuite étendu la ligne pour être droit jusqu'à la position d'arrivée créant l'arc complet. J' espère que cela a du sens. Probablement jouer avec les valeurs et voir ce que vous pouvez créer. Faites aussi un peu de jeu avec l'exemple interactif. C' est ainsi que nous pouvons ajouter des arcs et des cercles à la toile. Si vous revenez dans la prochaine vidéo, nous allons jeter un coup d'oeil au texte de dessin. 10. Les bases de la toile : ajouter du texte sur la toile: Dans cette vidéo, nous allons passer du dessin de formes et de lignes, et je vais vous montrer comment ajouter du texte au canevas, et comment ajouter différents styles et effets pour faire vraiment ressortir votre texte. Je suis allé de l'avant et copié la dernière vidéo et créé un stylet de code de texte, puis effacé la section de script, laissant le canevas et les variables de contexte. La façon d'ajouter du texte au canevas est d'utiliser FillText et aussi StrokeText, et vous devriez être en mesure de deviner ce que font ces deux vidéos précédentes. Le strokeText dessine le contour et fillText dessine le texte avec un remplissage de couleur. Nous allons commencer par utiliser fillText. Donc ctx.fillText, puis les crochets après cela. La première propriété que nous devons ajouter est le texte que nous voulons afficher. Je vais juste ajouter du texte d'ajouter du texte de canevas. Ensuite, les coordonnées de départ de 0, 0. Nous remarquons que si nous regardons la toile sur le côté droit, nous ne pouvons pas vraiment voir aucun des textes que nous venons de dessiner. C' est parce que les coordonnées de texte de 0, 0 sont en fait en bas à gauche du texte. Pour le déplacer vers le bas afin que nous puissions le voir à l'écran, nous allons changer la valeur y pour être 50. Maintenant, nous pouvons à peu près le voir apparaître sur l'écran. Pour le rendre un peu plus grand, nous pouvons ajouter quelques styles de police, ctx.font. Définissons la police pour être égale à 50 pixels pour la agrandir, et aussi le type de police pour être Helvetica. En fait, pour que cela fonctionne, nous avons juste besoin de placer cela juste avant le fillText, et cela devrait rendre le texte plus grand maintenant. On y va. C' est beaucoup plus grand maintenant, et nous avons changé la police. La taille par défaut est de 10 pixels, et c'est une police sans empattement. Maintenant, donnons-lui un peu de couleur. Ajoutons un fillStyle, ctx.fillStyle. Pour le rendre simple, je vais juste ajouter un nom de couleur de violet. Ensuite, poussons le texte au centre du canevas en utilisant TextAlign. Je vais mettre ça au centre. Ok, ce n'est pas exactement ce qu'on cherche. Si nous voulions que le texte apparaisse au centre du canevas, nous devons changer la position de départ dans la méthode fillText. Actuellement, le texte est centré sur les coordonnées zéro, qui sont ici. Poussons ça au milieu de la toile. Nous allons ajouter canvas.width sur 2. Le texte est référencé à mi-chemin du canevas. Faisons la même chose pour cette valeur, changez 50 pour être la hauteur du canevas divisée par 2, et c'est la ligne de base du texte à travers le centre du canevas. D' accord. Ensuite, nous allons jeter un oeil à la ligne de base du texte. Avant de regarder ça, je veux juste tracer une ligne juste à travers le centre de la toile, et vous verrez pourquoi dans un instant. Nous allons rapidement créer une ligne. Déplacer à 0 canvas.height divisé par 2. Dessinons la ligne. La ligne va être la largeur de la toile, puis la position y va être toile.hauteur diviser par 2. Dessinons la ligne avec le trait. Ok, maintenant nous avons une ligne qui apparaît au centre de la toile, et vous verrez pourquoi dans un instant. Je vais juste déplacer le texte tout en bas. Commençons à jouer avec la ligne de base du texte. En dessous, je vais juste ajouter CTX.textBaseline. Tel qu'il est actuellement, nous avons également le texte bien sur la ligne avec les queues suspendues sous la ligne imaginaire. Changeons cela en changeant le textBaseline pour qu'il soit inférieur, et voyons ce qui se passe. Cela pousse effectivement le texte vers le haut. Chaque lettre ou chaque partie de chaque lettre repose désormais sur la ligne de base. Il y a beaucoup d'options différentes que nous avons à regarder la ligne de base, nous pouvons également utiliser top, et cela pousse tout en dessous de la ligne de base. Nous pouvons également utiliser le milieu, ce qui ajoute la ligne de base pour être à travers le milieu du texte. Il y a aussi l'alphabétique. Cela nous ramène au début, car il s'agit de la valeur par défaut. Le dernier que je vais vous montrer est pendu. En utilisant la suspension, il ressemble un peu à l'utilisation du dessus. Cependant, il n'y a pas d'écart entre le haut des lettres et la ligne de base. fait, ils sont juste accrochés à la ligne de base là-bas. Lorsque vous utilisez la méthode fillText, il y a en fait un autre paramètre que nous pouvons ajouter, et c'est une valeur facultative. Cela définit la largeur maximale, que nous pouvons utiliser pour limiter le texte à une certaine taille. À titre d'exemple, je vais juste restreindre le texte à 200 pixels de large. Vous pouvez voir que écrase le texte vers le haut. Passons à 300, ça le rend un peu plus large. C' est utile si nous voulons garder les limites du texte dans un certain conteneur. Bien sûr, comme lors de l'utilisation de toutes les formes dans les vidéos précédentes, au lieu d'utiliser le remplissage, nous pouvons le modifier pour être un trait ou un trait de texte. Ensuite, nous obtenons juste le contour du texte plutôt qu'une couleur de remplissage solide. C' est ainsi que nous pouvons ajouter du texte à la toile, et comment nous pouvons ajouter du style à notre texte. Passons maintenant à la vidéo suivante. Nous allons jeter un oeil à enlever des sections de la toile. 11. Les bases de la toile : supprimer des sections de la toile: Bienvenue les gars. Cette vidéo s'intitule Suppression de sections du Canvas. Je vais jeter un oeil à quelques méthodes différentes pour couvrir les deux sections du Canvas, et aussi supprimer complètement les pixels qui avaient été dessinés sur certaines zones du Canvas. Mais regardons comment découper une zone du Canvas pour restreindre le dessin à une certaine forme. Je suis allé de l'avant et fork la dernière vidéo et définir le titre sur la suppression des sections de la toile. Je vais maintenant supprimer tous les scripts comme d' habitude sauf le Canvas et les variables de contexte. Puis enfin, je vais changer le style à l'arrière-plan, et définissons cela pour être rouge. Vous verrez pourquoi dans un instant. En utilisant ce que nous savons déjà, nous pouvons créer l'effet de supprimer des sections de la toile simplement en ajoutant une forme telle qu'un rectangle avec une couleur de fond telle que le blanc. Faisons ça maintenant. Tout d'abord, définissez le style de remplissage du rectangle, et je vais le rendre blanc. Ensuite, créons le rectangle lui-même avec fillRect. Je vais créer le mien en haut à gauche. Donc zéro zéro pour la position de départ, une largeur de la moitié de la toile, qui est 300, et puis je veux définir la hauteur pour être à nouveau la moitié de la toile, de 150. Ensuite, nous obtenons un rectangle blanc dans le coin supérieur, ce qui donne de l'illusion qu'une partie de la toile a été enlevée. Cependant, cela ne fait que couvrir l'objet qui est dessiné plutôt que de supprimer réellement les pixels. Si nous voulions réellement supprimer des pixels dans une certaine zone qui a déjà été dessinée, nous pouvons le faire en utilisant la méthode ClearRect, ce qui supprime réellement tous les pixels dans une zone donnée. Jetons un coup d'oeil à ça. Si nous voulions supprimer une partie du rectangle que nous venons de dessiner, nous pourrions utiliser CTX.clearRect, et les paramètres fonctionnent de la même manière que le fillRect. Nous commençons par la position que nous voulons commencer, qui dans mon cas est zéro zéro. Je vais juste créer un carré 100 par 100 à enlever, que vous pouvez voir c'est juste à peu près le coin supérieur. Cela a supprimé les pixels qui ont été dessinés dans cette section 100 par 100. Bien sûr, si vous voulez effacer l'ensemble de la toile, vous pouvez simplement ajouter toile.width et aussi toile.height. Cela permet de sélectionner toute la zone du Canvas et effacer tous les pixels qui y ont été dessinés. Je vais juste mettre une commande devant ça juste pour récupérer notre triangle blanc. La dernière méthode que je veux vous montrer est clip. Si vous avez déjà utilisé un masque d'écrêtage dans un logiciel de retouche photo tel que Photoshop, clip fonctionne avec les mêmes effets. Nous déclarons une section que nous voulons découper comme un rectangle ou un cercle , alors tout ce que nous dessinons sur la toile ne sera visible que dans cette zone dessinée. Toute autre chose en dehors de cette zone ne sera pas visible. Jetons un coup d'oeil à un exemple. Je vais juste dessiner un rectangle de plus. Cette fois, je vais créer un rectangle blanc dans le coin inférieur droit. Je vais définir la position de départ pour être au centre de la toile, donc c'est 300, 150. Alors exactement la même chose pour la taille 300 par 150. Pour créer ce clip, je vais d'abord dessiner un cercle au centre de la toile. Nous pouvons utiliser un cercle pour être la zone à laquelle nous voulons restreindre le dessin. Ajoutons un cercle ou un arc. Nous savons comment faire ça. Nous pouvons utiliser ctx.arc. La position de départ est au centre. La largeur de la toile divisée par deux. Même pour les hauteurs. Le rayon de 150. Ensuite, pour dessiner un cercle complet, nous allons commencer par le zéro comme position de départ, puis deux fois Math.pi. Ensuite, nous allons le dessiner avec le coup. Maintenant, il y a notre cercle qui est la pleine hauteur de la Toile. Maintenant, si nous voulons restreindre tout le dessin à l'intérieur du cercle, nous pouvons alors découper cette zone. Nous avons ctx.clip. Maintenant, tous les rectangles et tous les objets qui ont été dessinés ne sont visibles qu'à l'intérieur de ce cercle ou de cette zone que nous avons créé. Tout ce qui reste en dehors du cercle est simplement la couleur de fond Canvas. C' est ainsi que nous pouvons supprimer des sections du Canvas. Nous avons regardé comment couvrir certaines zones, nous avons regardé comment supprimer les pixels du Canvas, et enfin, nous avons regardé la méthode de clip pour restreindre tout le dessin à l'intérieur d'une certaine zone, comme le cercle que nous avons dessiné. Nous laisserons cette vidéo là, et je vous verrai dans la prochaine vidéo où nous allons jeter un oeil sur les gradients. 12. Les bases de la toile : dégradés: Bienvenue les gars. Dans cette vidéo, nous allons voir comment utiliser les dégradés dans le canevas. En particulier, nous allons jeter un oeil à deux types différents. Nous allons jeter un oeil aux gradients linéaires et radiaux. Pour commencer, j'ai créé un nouveau stylo, intitulé dégradés. Je vais supprimer le script de canevas dans, ce dont nous n'avons pas besoin. Toutes les sections sous les deux variables peuvent être supprimées. Je vais laisser le fond de style rouge, c'est bon. Commençons par un commentaire, juste des gradients linéaires. Nous allons commencer par utiliser la méthode de création de gradient linéaire. Donc ctx.CreateLinearGradient, et comme d'habitude, faites attention aux majuscules pour linéaire sur gradient. Donc, entre parenthèses, nous devons spécifier le début et la position de fin. Donc, je vais créer un dégradé à partir d'un coin de la toile, juste en face en ligne droite à l'autre. Cela va être utilisé pour mélanger d'une couleur à l'autre, ou même mélanger en utilisant autant de couleurs que vous le souhaitez. Donc, je vais définir la position de départ pour être en haut à gauche, qui est 0, 0, puis la position d'arrivée pour être en bas à droite. Donc, recadrons cela avec toile.largeur et toile.hauteur. Donc, je vais ensuite ajouter cette ligne dans une variable. Donc variable, je vais appeler la mienne linéaire, parce que c'est un gradient linéaire. Rangons-le à l'intérieur. Nous pouvons ensuite utiliser cette variable pour ajouter des arrêts de couleur, qui est la couleur que nous aimerions ajouter à différentes positions ou différentes étapes du dégradé. Alors ajoutons la variable de Linear.addColorStop. Donc, dans la méthode add color stop, je vais ajouter deux paramètres. Donc, le premier est une valeur comprise entre zéro et un. C' est la position du dégradé à laquelle nous aimerions que la couleur s'applique. Donc zéro est le début du gradient, et l'un est la fin. Donc, je vais définir la couleur de départ pour être verte, et ensuite je vais ajouter deux autres. Donc linéaire.AddColorStop. Cette fois, nous allons faire du cycle d'orange. Je veux que ce soit à mi-chemin du gradient. Donc, je vais le définir pour être 0,5 et la couleur pour être orange. Ensuite, nous en mettrons un de plus exactement de la même manière. Mais cette fois à la fin du dégradé, qui est la position un, et puis la couleur, je veux définir le mien pour être rouge. Donc nous sommes presque là maintenant juste quelques lignes de plus pour faire fonctionner ce gradient. Ensuite, nous allons définir le fillStyle, que vous avez vu avant, ctx.fillStyle. Donc, jusqu'à présent, dans ce cours, nous avons défini une certaine couleur, comme le blanc, le rouge ou le noir que nous aimerions appliquer à FillStyle. Mais cette fois, nous pouvons appliquer le gradient en ajoutant la variable linéaire, que nous venons de créer. Ensuite, enfin, nous devons créer les rectangles, ajouter le dégradé aussi. Donc, nous allons simplement utiliser une méthode fillRect. Je vais créer ce rectangle pour avoir la même taille que la toile. Donc 0, 0, 600, 300, et sauvegardez ça, et nous l'avons là. Il y a notre gradient linéaire. Donc, nous commençons le début, qui est la position zéro. Nous commençons par une couleur verte, puis à mi-chemin nous nous fondons en orange. Ensuite, nous terminons enfin à la couleur rouge, qui est définie pour être la position un, qui est la toute dernière position du dégradé, qui est juste ici. J' ai créé le rectangle pour ajouter le dégradé linéaire aussi. J' ai donc mentionné au début de cette vidéo que nous allons jeter un oeil à deux types différents de gradients. Donc le premier étant linéaire, et le suivant nous allons jeter un coup d'oeil est le gradient radial. Ainsi, la différence entre un dégradé linéaire fonctionne entre deux points sur une ligne droite, alors qu'un dégradé radial est circulaire et est un mélange entre deux cercles imaginaires, que nous spécifions. Jetons donc un coup d'oeil au gradient radial. Tout comme nous l'avons fait pour le premier exemple, je vais créer une variable, stocker ceci dans. Cette fois, je vais appeler ça radial. Donc, définissez cette valeur égale à ctx.CreaterAdialGradient. Donc, les paramètres que nous devons ajouter sont différents du gradient linéaire. Plutôt que d'avoir un point de départ et un point de fin, nous devons définir deux cercles imaginaires. L' un étant le début et l'autre un cercle de fin. Donc, pour commencer, je vais créer les deux cercles aux mêmes coordonnées de départ. Ensuite, nous allons créer l'effet de dégradé en agrandissant le rayon du deuxième cercle. Alors ajoutons les six paramètres. Les trois premiers paramètres sont pour le cercle de départ. Donc je vais créer ça au centre de la toile, qui est 300, 150. La troisième valeur est le rayon du cercle de départ. Donc je vais mettre ça à 10. Ensuite, nous ferons la même chose pour le deuxième cercle. Encore une fois, au centre de la toile de 300, 150. Mais cette fois, nous ferons le rayon à 150. Ensuite, tout comme l'exemple linéaire, nous pouvons utiliser la variable radiale pour ajouter les butées de couleur. Vous pouvez ajouter n'importe quelle couleur que vous aimez à l'intérieur. Je vais juste garder le mien comme le dernier exemple. En fait, je copie juste ces deux lignes et change la variable pour être radiale. Ensuite, définissez le fillStyle, et c'est radial. Ensuite, comme avant, nous utiliserons également FillRect. Je vais le définir pour être la pleine taille de la toile. Donc 0, 0, 600, 300. Maintenant, nous avons le dégradé radial qui s'affiche à l'écran. Nous créons donc le premier cercle imaginaire avec le rayon de 10. C' est le cercle intérieur plus petit, qui a la couleur de départ du vert. Ensuite, lorsque nous nous déplacons vers l'extérieur vers le plus grand cercle, qui a un rayon de 150, c'est le point final où nous nous mélangeons au rouge, qui est l'extérieur du cercle. Cet effet est donc obtenu en plaçant deux cercles, tous deux sur les mêmes coordonnées de départ de 300, 150. Bien sûr, nous pouvons jouer avec ceux-ci et créer un décalage. Ainsi, par exemple, si nous changeons la position x du cercle de départ à 200, cela déplace la section verte pour être loin avec la gauche. On peut jouer avec ça et avoir de beaux effets. Donc, nous allons changer cela en arrière, et nous pouvons également changer la position du cercle de fin. Donc je vais changer celui pour être 200 aussi. Cela décale le deuxième cercle à gauche, ce qui nous donne un effet différent. Donc, faites un jeu avec ces valeurs et voyez ce que vous pouvez créer. Ensuite, lorsque vous serez prêt à passer à la vidéo suivante, nous allons jeter un coup d'œil à l'ajout d'images à la toile. On se verra là-bas. 13. Les bases de la toile : ajouter des images à la toile: On va faire une petite pause pour dessiner sur la toile. Je vais jeter un oeil sur la façon dont nous pouvons réellement ajouter des images à la toile et comment nous pouvons travailler avec elles. Je suis allé de l'avant et j'ai créé un nouveau stylo et je l'ai nommé Ajouter des images à la toile. Allez-y et créez-en un si vous ne l'avez pas déjà fait. Pour commencer, je vais changer le style, alors supprimons simplement la couleur de fond parce que nous n'avons pas besoin de cela. Ensuite, je vais juste ajouter la bordure une fois de plus de deux pixels et une ligne solide. Ensuite, nous allons nous débarrasser de la section linéaire et radiale des gradients. Maintenant, il nous reste une toile vierge avec la bordure. Commençons par ajouter des éléments d'image à la toile et stockons cela dans une variable appelée Image. L' image variable est égale à une nouvelle image. Ensuite, nous pouvons définir la source de l'image avec image.src, puis nous allons ajouter le chemin à l'image que vous voulez ajouter. Pour prendre une image, je vais me diriger vers Wikipédia. Je vais aller sur wikipedia.org. Jetez un oeil à une image avec laquelle vous voulez travailler. Cela ressemble à une belle image, il suffit de cliquer dessus. Ensuite, si vous faites un clic droit ou un clic sur Contrôle, nous pouvons ensuite cliquer sur « Copier l'adresse de l'image », puis coller cela dans la source de l'image. Pour que cela s'affiche, nous devons utiliser la méthode de dessin d'image, donc ctx.drawImage. Ensuite, à l'intérieur des crochets, nous devons d'abord ajouter l'image que vous voulez ajouter. Nous l'avons stocké dans la variable d'image, puis c'est à la position de départ donc les x et y de 0, 0. Cela devrait faire apparaître l'image dans le coin supérieur gauche. Comme vous pouvez le voir, l'image est beaucoup plus grande que la toile. Elle s'étend beaucoup plus loin que nous ne pouvons le voir. C' est facile à réparer. Tout ce que nous devons faire est de définir la taille de l'image. Je vais définir ceci pour être de la même taille que la toile avec canvas.width, puis définissons la hauteur pour être canvas.height et enregistrez cela. C' est ainsi que nous pouvons ajouter une image à la toile. Nous ne sommes pas limités à d'autres nouvelles images à chaque fois. Nous pouvons en fait utiliser une image qui a déjà été ajoutée, non seulement à la toile, mais à n'importe quelle partie d'une page web. Donc, nous pouvons saisir soit l'image complète ou une section de l'image. Pour ce faire, je vais juste copier cette source d'image, puis supprimons l'image que nous venons d'ajouter. Je vais ajouter cette image en tant qu'élément HTML, donc la source de l'image est égale à, puis coller dans le lien que nous venons de copier. Vous pouvez voir que l'image est apparue sous la toile. C'est bien. Je vais juste ajouter un ID, donc nous pouvons l'utiliser avec des scripts simplement de MyImage. Je vais m'en servir pour prendre l'image bientôt. Ensuite, juste pour restreindre la hauteur, afin que nous puissions voir un peu mieux sur la page, définissons cela à 300, puis fermez la balise image. Nous avons une image existante qui apparaît sur la toile. Nous voulons saisir l'image complète ou une section particulière. La façon de le faire. Si nous revenons aux balises de script et alors nous pouvons saisir cette image par son ID. Stockons l'image à l'intérieur d'une variable d'image une fois de plus. L' image est égale aux documents, et saisons-la par son ID avec getElementByID. L' ID que nous voulons saisir est mon image, donc il suffit d'ajouter cela à l'intérieur de là, et ensuite nous pouvons redessiner l'image sur la toile avec CTX.drawImage. Que voulez-vous dessiner ? Eh bien, c'est cette variable appelée Image alors ajoutons cela dans. Ensuite, la position à laquelle nous voulons l'ajouter est 0, 0. L' image n'apparaît pas sur le canevas. C' est parce que nous essayons de recadrer l'image avant qu'elle ne soit réellement terminée le chargement. Pour surmonter cela, nous pouvons ajouter une fonction onload. Cela signifie que notre code de canevas ne sera pas réellement exécuté tant que le chargement du document n'aura pas été terminé. Cela inclut toutes les images et tous les scripts. Entourons tout le script actuel dans la fonction onload, donc window.onload. Une fois que le navigateur est chargé, nous allons déclencher une fonction. Ouvrons les accolades, mais entourez tout le code existant dans le script entre ces accolades. Retirons ceci et sauvegardons ça. Maintenant, l'image est apparue sur la toile, par exemple quelque chose à garder à l'esprit parce que parfois vous essayez de saisir une image ou quelque chose d'une page Web avant qu'elle ne soit réellement chargée, puis quand rien ne se passe, parfois nous pense qu'il y a un problème avec le code. Alors que tout ce que nous avons à faire est d'attendre que la fenêtre ou le navigateur finisse de charger le script ou l'image, et ensuite nous pouvons commencer à travailler avec elle. La dernière chose que je veux vous montrer est comment rogner ou découper une image. Nous pouvons également le faire en utilisant la même méthode d'image de dessin que vous allez juste prendre et regarder. La seule différence est qu'il prend beaucoup plus de paramètres. Jetons un coup d'oeil à une diapositive pour savoir comment l'utiliser. Sur le côté gauche se trouve l'image source. C' est l'image originale, elle est pleine taille. Le premier paramètre est simplement l'image que nous voulons saisir. Nous avons ensuite obtenu une position x et y qui est le point de départ dans le coin supérieur gauche de la zone que nous voulons recadrer. Nous définirons ensuite la largeur et la hauteur de la zone de l'image que nous aimerions recadrer. Ensuite, sur le côté droit, nous avons les quatre derniers paramètres qui se rapportent tous à la toile et à la façon dont nous aimerions placer sur la toile. Nous commencerons par la position x et y. Ils aimeraient aussi dessiner l'image recadrée. Encore une fois, il s'agit du coin supérieur gauche de l'image par rapport aux coordonnées du canevas 0, 0. Enfin, nous avons la largeur et la hauteur de l'image recadrée. Il s'agit de la taille de l'image lorsqu'elle est replacée sur la toile. Revenons à CodePen et mettons-en pratique. En utilisant ce que nous venons de jeter un oeil, nous pouvons ajouter quelques paramètres supplémentaires pour dessiner l'image. Plutôt que l'image pleine taille, que nous avons actuellement, je veux recadrer un carré de 100 x 100 pixels à partir du coin supérieur gauche de l'image originale. Nous pouvons laisser la première valeur telle qu'elle est, parce que c'est l'image que nous aimerions saisir. Nous pouvons également laisser la position 0, 0 car c'est le coin supérieur à partir duquel nous voulons commencer. La zone que nous voulons saisir sera de 100 par 100. Ensuite, pour placer cette section au milieu de la toile, je vais utiliser toile.width, divisé par 2, enlever 50. Ce 50 est la moitié de la largeur de l'image, ce qui va décaler l'image pour qu'elle soit au centre. Nous ferons la même chose pour la hauteur. Diviser par 2, enlever 50. Ensuite, nous garderons la même taille que le recadrage original de 100 par 100 pixels, et nous l'avons là. Il s'agit du coin supérieur gauche recadrée de l'image originale qui est de cette section. Ensuite, nous allons placer dans cette zone recadrée au centre de la toile avec ces quatre derniers paramètres. C' est ainsi que nous pouvons ajouter des images à la toile et je vous verrai dans la prochaine vidéo. 14. Les bases de la toile : motifs et ombres: Cette vidéo est tout sur l'utilisation de motifs et d'ombres avec la toile. Nous allons commencer par des motifs, et pour cet exemple, je vais ajouter une image. Cette image va être une tuile transparente, qui signifie que nous pouvons répéter la tuile horizontalement et verticalement, et elle se fondra en une seule. J' ai créé un nouveau CodePen avec le titre de Patterns & Shadows. J' ai changé la largeur de la toile pour être un peu plus grande, qui est de 1 000 sur 1 000. C' est parce que la tuile que je vais utiliser est de 640 pixels, cela vous donne juste un peu plus de place pour répéter la tuile. Si garder la fonction, la fonction onload de la dernière vidéo, la variable canvas, la variable de contexte. Je vais également réutiliser cette variable d'image que nous avons utilisée dans la dernière vidéo. Pour commencer, je vais juste aller à Pixabay juste pour prendre une tuile d'image à utiliser dans cette démonstration. Je veux faire une recherche de tuile sans couture, puis choisissez juste une tuile que vous aimez. Je vais aller pour celui-ci et puis je viens de cliquer sur le téléchargement gratuit. Idéalement, nous voulons télécharger l'image et l'inclure dans notre dossier de projet, je vais lier à partir de là. Mais parce que nous utilisons CodePen, moins que vous n'ayez un compte PRO, vous ne les construirez pas comme un actif à utiliser réellement. Je vais juste pour cet exemple, cliquez sur « Afficher », puis sélectionnez l'adresse de l'image. Ensuite, collons ceci dans la source de l'image de la dernière vidéo. Maintenant, nous pouvons utiliser cette image pour créer un motif, et le motif est déclaré de la même manière que les dégradés que nous avons examinés il y a quelques vidéos. Nous allons bloquer cela à l'intérieur d'une variable de pattern, une variable de pattern. Je vais définir ceci pour être ctx.CreatePattern. Créer un motif prend en deux paramètres. Le premier, nous allons ajouter l'image que vous voulez afficher, puis le second paramètre est le type de répétitions que nous voulons utiliser. Je vais juste faire que ça se répète, et nous reviendrons là-dessus dans un instant. Ensuite, nous pouvons définir le fillStyle pour être égal au modèle que nous venons de créer. Puis enfin, nous définissons la forme que nous voulons être remplis avec le motif, je vais juste ajouter un rectangle et le garder à la même taille que la toile. 0, 0 et la taille de la toile est maintenant de 1 000 sur 1 000. Nous pouvons voir l'image a été affichée, sélectionnez votre étirer le navigateur et voir tout cela. L' image a été répétée, elle est maintenant pleine taille de la toile. Nous savons que cela a été répété parce que Canvas mesure 1 000 pixels de large, mais l'image n'est que 640. Nous avons une répétition juste là, et c'est le début d'une nouvelle tuile. Jetons un coup d'oeil à quelques autres paramètres. Cela a été répété, je peux le changer en non-répétition et vous pouvez probablement deviner ce que cela fait. Cela permet à l'image de ne s'afficher qu'une seule fois à la position spécifiée. Il y a aussi des répétitions sur l'axe x et l'axe y. Donc répétez x, et cela signifiera qu'ils ne se répètent que sur l'axe des x, il devrait y avoir un espace blanc en bas, puis faisons la même chose sur l'axe des y. Il y a les répétitions verticales, et bien sûr vous pouvez répéter tout ce que vous voulez, ce n'est pas nécessairement une image. Ensuite, nous voulons passer à regarder les ombres, et pour ce faire, je vais juste changer la zone de largeur de toile pour être 600 par 300. Ensuite, nous pouvons supprimer l'exemple de motif pour déplacer toute la section de l'image, toute la section de motif, vous pouvez également supprimer l'image du bas là. Pour cet exemple d'ombres, je vais dessiner du texte sur le canevas. Avec ctx.font le rendre assez grand, nous le ferons 80 pixels. Ensuite, un type de police de Helvetica, puis un FillStyle pour être égal à une couleur. Je vais rendre le mien vert, puis le texte aligné, mettons au centre de la toile. Très bien, dessinons le texte avec FillText. Espérons que vous vous souvenez comment faire cela, le premier paramètre est le texte que nous voulons afficher. Soyons simples, avec des ombres de texte est cinq cet exemple. La position X et Y, je vais créer une taille de largeur de toile divisée par 2, puis la même chose pour la hauteur. Le dernier paramètre était la largeur maximale, limitons cela à 400 pixels. Il y a du texte, mais on vient d'avoir une petite faute de frappe, qui doit être px bien sûr. Nous avons le texte à l'écran, nous pouvons commencer à ajouter des ombres. Faisons cela au-dessus du texte que nous venons de dessiner. La première méthode que nous allons jeter un oeil est ShadowOffsetX. Ceci est une valeur en pixels, commençons par cinq. C' est le ShadowOffset sur l'axe des x, puis pour que vous puissiez voir l'ombre que nous venons de créer, ajoutons une couleur d'ombre. Nous avons CTX.ShadowColor, il se démarque bien, changeons cela pour être rouge. On peut voir l'ombre rouge, qui croise cinq pixels sur l'axe des x. Ces valeurs peuvent être positives ou négatives, donc nous allons changer ceci pour être négatif 5. Nous devrions voir l'ombre du texte sur le côté opposé. On peut faire la même chose sur l'axe y, on a un ShadowOffsety. Ajoutons une ombre de cinq pixels sur l'axe Y. Comme vous pouvez le voir, nous pouvons combiner le X et le Y pour créer de beaux effets. Nous pouvons également ajouter un flou en utilisant la méthode ShadowBlur, et il définit le niveau des effets flous. La valeur par défaut est zéro, nous allons définir ceci pour être quelque chose d'un peu plus grand, c'est juste 15. Cela nous donne une belle floue ou un effet mélangé. Nous pouvons augmenter cela pour être un peu plus grand. On va essayer 30, et c'est un peu plus subtil. Ramenons-le à 20. Jouez un peu avec ces valeurs et voyez ce que vous pouvez faire, et je vous verrai dans la prochaine vidéo. 15. Se perfectionner : Courbes de bezier et courbes quadratiques: Bienvenue les gars. Nous allons commencer un peu les choses maintenant et jeter un oeil à la façon d'utiliser les courbes bézier et quadratiques. Créons un nouveau stylo pour cette vidéo. C' est donc ce qu'on appelle des courbes bézier et quadratiques. Nous devrions copier ceci à nouveau juste pour ne pas avoir besoin de continuer à nous rappeler comment épeler ça. Collez cela dans le titre et enregistrez-le, faites-le un peu plus d'espace. Il devrait déplacer à nouveau tout le script à l'exception nos variables de canevas et de contexte. Donc nous sommes prêts à y aller. D' abord, nous allons jeter un oeil aux courbes quadratiques. Pour commencer et mieux expliquer comment ils fonctionnent, je vais d' abord dessiner trois cercles ou trois points sur la toile à titre de référence. Commençons par un chemin, et vous voyez pourquoi nous les dessinons en un instant. Créons les points de départ, puis créons notre premier cercle, nous sommes à l'arc. Donc, je vais faire les points de départ 50, 250, rayon de cinq, et la position de zéro pour commencer, et de faire un cercle complet est deux fois Math.pi. Je vais juste copier cet arc pour que vous puissiez l'utiliser encore quelques fois. Passons aux deuxième points pour dessiner le deuxième cercle. Donc on doit être à 550, 50. Dessinons le deuxième arc là-dessus, puis le troisième va être déplacé à la position 50, 50, puis le troisième cercle, juste là. Ensuite, pour dessiner les cercles, nous allons utiliser la méthode de remplissage. Changeons tellement les positions des arcs s'ils se déplacent vers. Donc celui-ci fait 550 et 50, et le troisième est 50 et 50. Maintenant, nous avons aussi les trois points sur la toile comme référence. Donc, je vais juste ajouter un commentaire. C' est le point de départ, ce sont les points de fin, et ensuite le troisième est ce que nous appelons un point de contrôle. Nous utilisons QuadraticCurveTo pour créer ce qu'on appelle une courbe de bézier quadratique. Ce type de courbe commence à partir des points de plume actuels. Commençons par les points de plume actuels en utilisant un MoveTo. C' est la position que nous voulons commencer, qui est ce premier point ici. Donc, les points de départ étaient 50, 250. Ce sont des points à l'intérieur des parenthèses, qui vont déplacer le stylo vers ce point de départ là. Ensuite, nous utilisons la méthode QuadraticCurveTo, et il prend dans les points de contrôle et aussi les points de fin. Ajoutons ça maintenant. Donc CTX.QuadraticCurveto. Les deux premiers paramètres sont les points de contrôle, qui est celui-ci. C' est la position 50, 50, puis deux autres, qui est le point final. Nous avons aussi les points de terminaison de 550, 50, et puis pour tracer la ligne, nous pouvons utiliser le trait. Voyons ce qui se passe. Nous avons une belle courbe quadratique, donc nous avons les points de départ vers lesquels nous avons déménagé, nous avons les points de fin, nous avons les points de fin,que nous avons ajoutés juste ici, et ensuite nous avons un point de contrôle, qui efficacement tire la ligne vers pour créer le type de courbe que nous voulons. Bien sûr, nous pouvons changer cela pour être valeurs différentes et cela affectera la position de la ligne. Changons ça à 0, 0, et nous obtenons un type de courbe différent à mesure que la ligne est tirée plus loin dans le coin. Ensuite, je veux jeter un oeil à une courbe de bézier. Cela fonctionne de la même manière que la courbe quadratique, que nous venons d'examiner. Mais plutôt que de prendre un point de contrôle, nous utilisons deux points de contrôle pour avoir un contrôle plus fin sur la ligne. Ajoutons simplement un commentaire de la courbe de bézier. Nous pouvons nous mettre au travail en ajoutant quelques références, comme nous l'avons fait auparavant. Donc CTX.BeginPath. Cette fois, nous devons créer un point de départ, et un point de fin, puis deux points de contrôle à partir desquels travailler. Pour se démarquer sur la toile, nous allons simplement changer le FillStyle, cette fois pour être rouge. Le point de départ, faisons le ctx.arc. Le premier point est 100 par 50, un rayon de 5 pixels. Je vais faire un cercle complet, avec deux fois Math.pi. Copions celui-ci, puis ajoutons-les avec le ctx.fill. On y va. C' est le premier point, qui est notre point de départ. Ensuite, nous allons créer le point final. Ajoutons un nouvel arc, et si je pouvais faire le MoveTo d'abord. La prochaine, nous allons ajouter notre position 500, 50, puis ajouter le cercle au même point, donc c'est notre deuxième cercle. Ces cercles que vous dessinez sont purement à des fins de démonstration, juste pour que vous puissiez voir comment la ligne est tirée vers les points de référence. Nous n'avons pas besoin de les inclure lors de la création des courbes. Nous avons les points de départ, les points de fin, et maintenant nous devons créer les premiers points de contrôle. Donc, le point de contrôle 1, puis nous allons déplacer le stylo à la position 100, 250, coller dans l'arc à la même position de 100, 250. Puis point de contrôle 2, je veux être à la position 500, 250. Il suffit de changer l'arc à 500, puis 250. Cela laisse le point de départ, le point de fin, puis les deux points de contrôle au niveau de la liaison. Ce que nous recherchons, c'est une courbe qui va commencer ici, puis faire le tour et être tirée par les deux points de contrôle et la courbe remonte aux points d'arrivée dans le coin supérieur droit. Comme avec la courbe quadratique, nous allons déplacer le stylo à la position de départ. Nous avons CTX.moveto, et le point de départ était 150, et puis plutôt que QuadraticCurveto, nous utilisons BezierCurveto pour tracer la ligne. Nous avons nos points de départ ici. Alors ajoutons d'abord le point de contrôle numéro 1, qui est 100, 250 sur les x et y, puis le point de contrôle 2, qui est x, 500, puis y, 250, et enfin nous ajoutons les points de fin, qui est notre 500 par 50. Ensuite, nous allons ajouter le trait pour enfin dessiner la ligne sur le canevas. Tout comme avant, nous pouvons déplacer les points de contrôle pour créer un style de ligne différent et nous donner n'importe quel type de courbe que nous voulons utiliser. Bien sûr, vous pouvez également utiliser le remplissage plutôt que trait pour remplir la courbe avec la couleur d'arrière-plan. Alors change-le en AVC. C'est ça. J' espère que cela a du sens, et c'est ainsi que nous pouvons utiliser des courbes bézier et quadratiques avec la toile. Je te vois dans la prochaine vidéo. Nous allons jeter un oeil à l'utilisation des méthodes de sauvegarde et de restauration. 16. Se perfectionner : Enregistrer et restaurer: Bienvenue les gars. Dans cette vidéo, nous allons jeter un oeil à une caractéristique intéressante de la toile, qui est les méthodes de sauvegarde et de restauration. Créons un nouveau volet pour le démontrer. Appelons ceci save and restore, donc Copier et Coller dans le titre et nettoyons le script, totalement toute la section de la dernière vidéo. Ensuite, changez la hauteur de la toile pour être 600 et puis nous sommes prêts à partir. On y va. Tout d'abord, nous allons jeter un oeil à save sur la méthode dite enregistre l'état actuel du canevas sur une pile. L' état actuel enregistré inclut des éléments tels que le style de trait, la largeur de n'importe quel style de ligne, les lignes de base des téléphones, les limites puissantes et la transformation pour n'en nommer que quelques-uns. Commençons par créer deux cercles, donc je vais créer un rouge et un vert. Je vais créer un chemin, on commencerait chemin. C' est pour le premier cercle, donc je vais ajouter un fillStyle égal au vert, puis dessiner le cercle avec la méthode arc. La première position que je veux est 150 par 150 sur les x et y, un rayon de 80, puis nous allons créer un cercle complet avec la position de départ de zéro. Ensuite, deux fois math.pi, puis utilisez un remplissage, donc c'est un cercle vert et je vais juste copier ceci et le coller ci-dessous changera le fillStyle en rouge et la position à 400, 150, donc nous avons de beaux rouges et un beau cercle vert. Je vais créer un cercle de plus ci-dessous, mais cette fois sans aucun remplissage de couleur, alors supprimons cela et déplacons la position à 150, 400. Changez le y pour être 400. Vous remarquez comment ce troisième cercle, même si nous n'avons pas de fillStyle, a hérité de la couleur rouge du cercle précédent. C' est bien si c'est ce qu'on veut. Mais nous pouvons également utiliser la sauvegarde et la restauration à certains points aux changements. Par exemple, nous pouvons enregistrer l'état de la toile après le premier cercle , puis utiliser la méthode de restauration juste avant créer le troisième cercle pour lui donner la couleur de vert. Juste après le bloc de code pour le premier cercle vert, ajoutons ctx.save et donc nous savons ce que nous faisons. Nous allons juste ajouter un commentaire, donc cela va sauver le remplissage vert, puis pour créer le remplissage vert sur le troisième cercle, nous pouvons ajouter ctx.restore. Il suffit de plier le troisième cercle est dessiné. On y va. Donc, cela restaure la couleur des cercles pour être verte tout comme le premier. Nous pouvons également continuer avec plusieurs points de sauvegarde et de restauration. Je vais créer un quatrième cercle, pas le fond. Cette fois, le x est 400, le y est 400, et le reste peut rester le même. Nous avons un point sûr pour le champ vert, alors ajoutons un point sûr aussi pour la couleur rouge. Faisons une sauvegarde de plus et un commentaire afin que cela sauve le remplissage rouge. Donc tu sais, il y a quelque chose qui vient de se passer là-bas. Une fois que nous avons créé une seconde sauvegarde, nous sauvegardons le remplissage rouge, le cercle vert que nous vous restaurons avant est maintenant redevenu rouge. Commentons ça à C, donc c'est vert. Ensuite, nous ajoutons l'enregistrement, puis il change de rouge. La raison pour laquelle cela se produit est parce que vous avez mentionné au début de cette vidéo que chaque fois que nous créons une sauvegarde est ajoutée à la pile, donc nous allons d'abord enregistrer, qui est un nouveau champ, serait ensuite sauvegardé sur la pile un remplissage rouge et parce que nous n'avons fait la méthode de restauration qu'une seule fois, il revient au dernier coffre-fort, qui est le remplissage rouge. Si alors nous voulons revenir une sauvegarde de plus dans le nouveau champ, nous devons faire une seconde restauration, donc ctx.restore. Maintenant, cela pour restaurer le vert va simplement supprimer le fillStyle. Cela devrait aller au vert, ce qu'il fait. Ajoutons quelques commentaires à cela, donc parce que c'est la première restauration, cela récupère la dernière sauvegarde et la dernière sauvegarde était le remplissage rouge. Ensuite, en bas, nous avons la deuxième restauration, qui récupère la deuxième dernière sauvegarde de la pile, et la deuxième dernière couleur, que vous avez enregistrée était le remplissage vert d'origine. Ils vont y aller si j'espère que ça a du sens. En utilisant save and restore, tout est en fonction de l'ordre dans lequel nous créons les sauvegardes. Ensuite, nous devons restaurer dans un ordre particulier pour nous assurer que nous récupérons la sauvegarde particulière que nous allons vouloir réutiliser. Merci et nous passons maintenant à la prochaine vidéo où nous allons voir comment mettre à l'échelle, faire pivoter et traduire. 17. Se perfectionner : mettre à l'échelle, tourner et traduire: Bienvenue à tout le monde. Commençons par créer dans notre nouveau stylo pour cette vidéo, qui s'appelle échelle, rotation et traduction. Donc, nous allons juste changer le titre pour être à l'échelle, faire pivoter et traduire. Ensuite, créons notre modèle de squelette. Pour réutiliser donnera la fonction, les deux variables et tout le reste peuvent être supprimés. On y va. Cette vidéo porte donc sur l'application de transformations à nos dessins sur toile. Dans cette vidéo, nous examinerons la mise à l'échelle, la rotation et la traduction. Donc, d'abord, nous voulons commencer par créer un rectangle simple à manipuler. Alors dessinons un rectangle avec un style de remplissage. Je vais rendre le mien violet. Puis dessinez sur le Canvas avec FillRect. Donc, le coin supérieur gauche est 0, 0, 300 dans le x et 200 sur le y. Donc juste un simple rectangle rempli. Je vais commencer par ajouter la méthode translate, et cela déplace les points de référence de x et y vers un emplacement différent. Alors ajoutons ctx à notre traduction. Il prend deux paramètres, qui est la valeur x pour commencer. Ajoutons la valeur y de 100. Donc on peut voir ce que ça vient de faire. Nous avons traduit les points de référence, qui étaient à l'origine 0, 0 dans le coin supérieur. Ensuite, nous avons déplacé le point de référence pour être 100 à travers et 100 vers le bas sur l'axe y. Nous pouvons également faire pivoter notre triangle ou faire pivoter notre dessin en utilisant la méthode de rotation. En utilisant la rotation, la valeur par défaut, à laquelle nous sommes, est en radians plutôt qu'en degrés. Donc, pour convertir en degrés, nous devons multiplier les degrés par maf.pi divisé par 180. La même valeur que celle que nous avions au début, comme 45, sera alors en degrés. Cela fera pivoter le rectangle de 45 degrés. Nous devons juste être prudents lors de l'utilisation de traduire et de faire pivoter les deux ensemble. Nous devons d'abord ajouter traduire. Parce que si nous ne le faisons pas, les points de rotation sont l'origine du Canvas, qui est le coin supérieur gauche. Assurez-vous donc juste que ces deux sont appliqués dans le bon ordre. Donc, je vais juste commenter la rotation et je vais passer à l'échelle de nos dessins. Ainsi, vous pouvez les mettre à l'échelle pour qu'ils soient plus grands ou plus petits. Pour ce faire, je vais juste créer un rectangle de plus. Donc, je vais juste copier cette section et puis coller le deuxième triangle dans. Donc le style de remplissage, je vais mettre le mien orange. Ensuite, pour l'éloigner, nous ajouterons une traduction. Donc, le x de 100 et la valeur y de 300. Nous avons donc obtenu les deux rectangles dessinés à l'écran avec différents emplacements de traduction. Nous allons utiliser la méthode d'échelle pour appliquer une mise à l'échelle au deuxième rectangle. Donc, nous utilisons le ctx.scalemethod. Cela prend deux paramètres. Donc, la largeur et la hauteur. Donc, si nous voulions mettre à l'échelle le dessin à la moitié de sa taille actuelle, ou 50 pour cent, utiliserait 0,5 sur x et y ce qui fait de notre rectangle la moitié de la taille qu'il était avant. Bien sûr, un serait 100 pour cent, c'est la taille d'origine. Si nous voulions faire deux fois la taille, nous pourrions changer cela pour être deux ou 1,5, pour être 150 pour cent et ainsi de suite. Un regard aussi basique sur l'application des transformations. Dans la prochaine vidéo, nous nous baserons sur ce que nous avons regardé dans cette vidéo en regardant comment utiliser à la fois la méthode de transformation, apparition de la transformation. Donc on se verra là-bas. 18. Se perfectionner : transformations de la toile: Dans la dernière vidéo, nous avons examiné certaines méthodes de transformation telles que : traduire, faire pivoter et comment mettre à l'échelle nos objets. Dans cette vidéo, nous allons passer à autre chose et jeter un oeil sur la façon dont nous pouvons appliquer toutes ces transformations en une seule méthode. En particulier, nous allons jeter un oeil à la méthode de transformation et définir la transformation. Créons notre nouveau stylo pour le faire dans. Celle-ci s'appelle des transformations. Nous pouvons laisser la taille de la toile comme elle est. En fait, nous quitterons le premier rectangle, qui est le violet. Nous devrions nous débarrasser de l'exemple orange, et nous allons travailler avec ce triangle. J' ai commenté tourner, et je veux faire la même chose pour traduire. Vous verrez pourquoi ces deux-là sont laissés dans un instant. Celui-ci restaure notre rectangle pour être aux coordonnées d'origine en haut à gauche. Nous voulons d'abord jeter un oeil à l'utilisation de la méthode transform, donc ctx.transform. Cela peut devenir assez compliqué. Je vais juste ajouter un commentaire ci-dessus pour vous montrer tous les paramètres que nous pouvons utiliser, donc l'intervalle de six. Le premier est la mise à l'échelle horizontale. Le second est l'inclinaison horizontale. Le nombre primitif 3 est une inclinaison verticale. Ensuite, le numéro 4 est la mise à l'échelle verticale. Juste deux de plus, le numéro 5 est de traduire ou de se déplacer horizontalement. Le dernier, qui est le numéro 6, est de traduire verticalement. Il y a beaucoup de choses à prendre en compte. Tout d'abord, nous allons jeter un oeil aux paramètres que nous connaissons déjà, que nous avons utilisés dans la dernière vidéo et qui sont à l'échelle et à la traduction. Ajoutons ces Inside la méthode transform. Tout d'abord, regardons la mise à l'échelle. Le premier paramètre est la mise à l'échelle horizontale. Je vais en définir un, ce qui équivaut à 100 pour cent. Tout comme la dernière vidéo, 0,5 est 50 pour cent et ainsi de suite. Il est donné pour l'instant, alors mettons-le à zéro. même chose avec l'inclinaison verticale. Le quatrième paramètre est la mise à l'échelle verticale. Je remettrai ça à un ou 100 pour cent. Ensuite, le nombre 5 et 6 est de traduire sur l'axe des x et des y. Soyons simples et nous allons le traduire sur l'axe des x, 50 pixels et zéro sur le y, et enregistrer ça. Il y a notre rectangle retourné. Il a été retourné de la même taille parce que nous avons défini la mise à l'échelle sur les x et y sur 100 pour cent. Je peux rendre ça un peu plus grand, comme ça. Plutôt que la position de départ pour être dans le coin supérieur gauche de zéro, nous avons déplacé 50 pixels sur l'axe des x, et nous l'avons laissé à zéro sur l'axe des y, donc il est toujours en haut. Les seuls paramètres que nous n'avons pas examinés sont l'inclinaison horizontale et verticale. Appliquons certaines de ces valeurs maintenant. Commencez par une inclinaison horizontale et voyons quel effet cela a. Commençons par 0.2. Augmente cela. 0.5, et vous avez l'idée pour que je puisse continuer à augmenter ça. Nous allons essayer un, et nous pouvons aller encore plus loin, nous ne nous arrêtons pas à un, et ainsi de suite. Changeons l'inclinaison verticale maintenant. Encore une fois, commençons par 0.2. et nous devrions obtenir une inclinaison dans la direction verticale plutôt que horizontalement. Jetons un coup d'oeil à 0,5. Nous pouvons l'utiliser pour faire des formes intéressantes. Essayons un. On y va. Ceci est utile si nous voulons appliquer assez peu de transformations à la même forme. Je vais le changer à zéro et revenir à notre rectangle d'origine. Lors de l'utilisation des méthodes de translation, non seulement les transformations que nous définissons dans les paramètres appliqués, mais il prend également en compte toutes les transformations telles que l'échelle et la traduction, qui ont déjà été déclarées précédemment. C' est ce que nous appelons ajouter dans la matrice de transformation. En utilisant la méthode de transformation, nous avons déplacé la traduction horizontalement de 50 pixels. Si nous décommentons les traductions que nous avons précédemment définies. Sur l'axe des x, nous avons la traduction de 100 pixels, donc nous devrions obtenir les 100 pixels, ajoutez-le des 50. Si nous décommentons les traductions, ce que nous faisons. C' est déplacé sur 150 pixels et nous avons également les 100 pixels sur l'axe Y. Il suffit de garder à l'esprit que tout ce qui est appliqué avant cette transformation sera également pris en compte. Mais que se passe-t-il si nous voulions que notre transformation ignore toutes les transformations précédentes ou réinitialise efficacement la matrice de transformation. Ensuite, c'est à ce moment que nous pouvons profiter de la méthode de transformation de l'ensemble. Définir la transformation réinitialise la transformation actuelle avant d'appliquer les transformations que nous définissons. Pour ce faire, tout ce que nous avons besoin de faire est changer transformation pour être défini transformation. Vous remarquez comment la traduction que nous avons définie en haut a maintenant été ignorée, ne laissant que les paramètres que nous avons définis pour être appliqués au rectangle. C' est ainsi que nous pouvons traduire, mettre à l'échelle et incliner en utilisant la méthode transform. La principale chose à retenir est lors de l'utilisation de transform, il prendra toujours en compte toutes les transformations précédentes. Cependant, si nous définissons cette transformation pour être définie, toutes les transformations précédentes seront ignorées, ne laissant que celles entre parenthèses à appliquer. Merci d'avoir regardé et je vous verrai dans la prochaine vidéo. Nous allons jeter un oeil à travailler avec des pixels. 19. Se perfectionner : travailler avec les pixels: Dans cette vidéo, nous allons passer des transformations, je vais jeter un oeil à travailler avec des pixels. Je suis allé de l'avant et créé un nouveau stylo, dans CodePen appelé travailler avec des pixels. Nous avons changé la hauteur de la toile à 300 parce que c'est tout l'espace dont nous avons besoin, et nous avons également supprimé toutes les transformations de la dernière vidéo. photos numériques ou les images de rouille sont composées de pixels, et les couleurs sont composées d'une combinaison de rouge, vert et bleu pour créer n'importe quelle couleur imaginable. Les photos peuvent également avoir un canal d'atténuation, appelé canal Alpha, qui représente la valeur de transparence. Pour cette vidéo, nous allons manipuler les valeurs de ces quatre canaux pour créer des effets tels que la création d'une image couleur en niveaux de gris. Pour cette vidéo, nous allons manipuler les valeurs de ces quatre canaux pour créer des couleurs et des effets différents. Ces effets peuvent être utilisés pour faire des choses telles que faire l'image en niveaux de gris, ou en noir et blanc, et ce sont des techniques similaires utilisées dans les logiciels de retouche d'image, tels que Photoshop. Nous allons d'abord jeter un oeil à CreateImageData, nous voulons bloquer cela dans une variable appelée ImageData. Définissez cela comme CTX.CreateImageData, et pour cela nous allons simplement passer une taille de l'image que vous voulez créer. Je vais faire le mien 400 pixels de large par 200 pixels de haut, et cela crée un objet ImageData vide. Nouvel objet ImageData prend en compte des paramètres tels qu'une largeur, une hauteur, et aussi ImageData. Ensuite, nous allons créer une boucle JavaScript pour, et c'est pour que nous puissions parcourir toutes les valeurs dans les objets ImageData. Les valeurs qui nous intéressent sont les données de pixels, parce que nous avons créé une zone de 400 sur 200 mais un pixels inférieur avec lequel travailler, et chaque pixel a quatre couleurs différentes, ou pour différents canaux qui est le rouge, vert, bleu et Alpha. Lors de l'utilisation de CodePen, il pourrait être assez facile d'écraser le navigateur. Je vais juste commenter la boucle, ou nous tapons, donc ça ne cause aucun problème. Donc i est égal à 0 ; an i est inférieur à imageData.Data.Length ; i plus égal à 4. Jetons un coup d'oeil à ce que nous avons, nous avons créé une boucle for, et une boucle for continuera à parcourir toutes les données pendant un certain nombre de fois. Les données que nous voulons parcourir en boucle, sont les ImageData que nous venons de créer, et data.length est la longueur du tableau ou le nombre de pixels, qui est contenu dans une section de 400 par 200 pixels. Parce que chaque pixel a les quatre valeurs ou les quatre canaux dont nous avons parlé, à savoir le rouge, vert, le bleu et l'alpha. Nous allons ensuite incrémenter la boucle de quatre à chaque fois, puis ces quatre valeurs individuelles pourraient être manipulées à l'intérieur de la boucle une par une. Faisons cela maintenant, sélectionnez le ImageData.Data, puis entre crochets, nous pouvons sélectionner le pixel individuel. Nous avons créé la variable de i, i plus 0 va être le premier canal, et c'est la valeur rouge et la valeur est comprise entre 0 et 255. Copions ce trois fois de plus pour créer les quatre canaux différents. Celui-ci va être le canal vert, c'est i plus 1, et puis i plus 2 est pour le canal bleu, puis i plus 3, et c'est l'Alpha ou la transparence. 0 est entièrement transparent et 255 est une couleur unie. Si cela semble un peu déroutant jusqu'à la maturité tout de suite, nous allons jeter un oeil à toutes les données dans la console et devraient toutes devenir claires. Les valeurs de pixel des nouveaux objets sont des blocs transparents par défaut, et il s'agit d'une valeur RGBA de zéro. Je vais juste changer pour être une couleur verte. Je vais définir les rouges à 0, et le vert à la valeur maximale de 255, le bleu à 0 et la transparence. Pour en faire une couleur unie, nous en ferons 255. Ensuite, pour mettre l'ImageData sur le canevas, utilisez ctx.putimageData. Le ImageData que nous voulons ajouter est la variable d'ImageData, et la position est 0, 0. Maintenant, nous pouvons décommenter la boucle for pour exécuter ceci, alors sauvegardez cela. Il y a notre image qui est de 400 pixels par 200 pixels, avec une boucle à travers toutes les couleurs individuelles et changer la couleur noire par défaut pour être cette couleur verte, que nous avons définie ici. Pour mieux comprendre ce qui se passe là-bas, je vais juste faire un console.log et l'information que nous voulons regarder est ImageData. Nous avons un journal de console, faisons un clic droit et accédez à Inspects, puis si nous sélectionnons l'onglet Console, il y a notre objet ImageData que nous avons créé. Puis ouvrons cela, je clique sur la petite flèche là. Nous avons les données et ce sont les données qui seront dans l'accès dans la boucle. J' ai aussi une largeur et une hauteur que nous avons réglées à 400 par 200. Si nous ouvrons ensuite les données, nous trouvons alors beaucoup de données qui y sont contenues, et ce sont toutes les données de pixels qui sont contenues dans cette zone de 400 par 200, et elles sont toutes sectionnées en groupes de 10 000. J' ai juste ouvert une liste déroulante, il y a des données de pixels 0-99. Nous avons été en boucle sur quatre pixels à la fois, 0, 1, 2, 3, 4, c'est les quatre valeurs de couleur pour un pixel. Puis le numéro 4, 5, 6 et 7 est le deuxième pixel. C' est pourquoi nous sautons la boucle de quatre à chaque fois afin de passer à la deuxième série de pixels, les premiers pixels et ainsi de suite. C' est 0, 255, 0, 255 pour chaque pixel, et ce sont les données que nous avons définies dans la boucle. Nous pouvons rapidement changer cela, et juste vérifier les valeurs comme étant reflétées. Par exemple, nous pourrions changer le rouge à 10, et sauvegardons cela, puis actualisons la page, ouvrez ImageData, puis revenez dans la première section. Encore une fois, il y a notre premier pixel, c'est 10, 255, 0, 255, et puis nous allons revenir à travers le deuxième pixel, et ainsi de suite. C' est ainsi que nous pouvons manipuler les valeurs de quatre pixels de RGBA, nous allons juste fermer. C' est ainsi que nous pouvons utiliser CreateImageData. La dernière méthode que je veux vous montrer dans cette vidéo est GetImageData, et nous pouvons utiliser la méthode GetImageData pour trouver les données de pixel pour la zone de la toile. Par exemple, si nous voulions juste connaître les données pixels 400 pixels par 100 pixels carrés, nous pouvons le savoir. Ajoutons cela tout en bas, je vais juste commenter cette déconnexion de la console en premier. Faisons ctx.GetImageData , puis nous spécifions la position de départ qui veulent saisir. Si nous voulons saisir une zone dans le coin supérieur gauche, nous définissons la position d'arrêt de 0, 0. Définissons la zone que nous voulons saisir à 100 par 100. Nous pouvons enregistrer ceci sur la console , puis entourer cette section avec des parenthèses, puis actualiser. Si nous allons dans les outils de développement maintenant en cliquant sur Inspecter, puis aller dans la console et vérifier l'ImageData. Nous pouvons voir tout de suite qu'il y a beaucoup moins de pixels sur les murs pour le dernier journal de la console lorsque nous avons regardé la section complète. Parce que nous ne vérifions qu'une petite zone dans le coin supérieur, nous avons beaucoup moins d'ImageData dans la console, et bien sûr, nous pouvons toujours ouvrir chacune d'entre elles et voir les données individuelles. C' est comme ça que nous pouvons travailler avec des pixels sur la toile, et je vous verrai dans la prochaine vidéo. 20. Intro du défi : convertir des images en échelle de gris: Maintenant, nous avons une meilleure compréhension de la façon de travailler avec les pixels en utilisant le Canvas, et maintenant j'aimerais vous poser un défi pour vous d'aller à. Ce défi est de prendre une image en couleur et de la convertir en niveaux de gris, ou en noir et blanc, j'aimerais vraiment que vous donniez cela vous-même avant passer à la solution dans la prochaine vidéo. Mais avant que je te quitte pour aller de l'avant, il y a juste une ou deux petites choses que j'aimerais te montrer en premier, juste pour t'aider. Le premier est en fait comment faire une image en niveaux de gris. Dans la dernière vidéo, nous avons utilisé une boucle for, et nous avons saisi toutes les données de pixel de la toile. Une fois que vous avez trouvé une image à placer sur la toile, en utilisant l'image de dessin, j'aimerais alors que vous créez une boucle for d'une manière similaire à celle-ci, bien que nous n'ayons besoin que des canaux rouges, verts et bleus. La façon dont nous pouvons créer un effet de niveaux de gris sur l'image est de définir la valeur des canaux rouge, vert et bleu pour être la moyenne des trois. Une façon de le faire est de créer une variable et d'ajouter les trois valeurs ensemble, puis de la diviser par trois, et de définir les trois canaux pour être l'équivalent de la valeur moyenne. Une autre chose importante que je voudrais souligner, qui peut causer des problèmes en cours de route est que nous devons utiliser la méthode get ImageData pour le défi. Lors de l'utilisation de cette méthode, il faut que l'image ainsi que le code qui l'exécute soient sur le même domaine du serveur Web. Parce que nous n'avons pas accès au serveur, parce que nous utilisons CodePen, nous devons ajouter un attribut spécial à l'image appelé origine croisée, ce qui nous permet d'utiliser une image provenant d'une source différente dans notre démo sans lancer d'erreurs. Si vous voulez en savoir plus sur l'attribut d'origine croisée, vous pouvez maintenant accéder à ce lien à l'écran. Sinon, je vais juste vous montrer la seule ligne de code que vous devrez ajouter lors de la création de l'image. La ligne de code que vous devez ajouter, tout d' abord je vais sélectionner une variable d'image. Si votre valeur pour charger une image est un nom différent, bien sûr, changez cela. Puis croiser l'origine, et je vais mettre le mien égal à anonyme. Donc, si vous ajoutez cette ligne de code juste avant d'ajouter la source de l'image, vous devriez être prêt à partir. Sachez également que si vous travaillez avec un éditeur de texte au lieu d'utiliser CodePen, vous pouvez également rencontrer le même problème dans certains navigateurs, tels que Google Chrome lorsque vous utilisez les paramètres par défaut. Une solution de contournement consiste à utiliser un hôte local tel que MMP pour servir votre projet. Ou j'ai aussi trouvé que le navigateur Firefox fonctionne sans aucun problème, donc je laisse cela avec vous pour avoir un aller. Si vous êtes coincé, ne vous inquiétez pas, passez simplement à la vidéo suivante et je vais vous montrer ma solution. 21. Défi : convertir des images en échelle de gris: Salut les gars. J'espère que vous avez réussi à relever le défi ou j'espère au moins que vous lui avez donné un objectif. Si vous avez eu des problèmes, ne vous inquiétez pas, je vais aller de l'avant et vous montrer une solution de travail. Allons de l'avant et créons un nouveau stylo. Je vais appeler cela le défi : la mise à l'échelle de gris de l'image. Je vais créer une toile plus grande qu'avant, juste parce que vous allez y ajouter une image, qui sera probablement plus grande que 600 sur 300. Ensuite, nous allons vider les scripts. Nous allons commencer par une balise de script propre. Du haut, je vais créer nos deux variables. Tout d'abord est une variable de canevas, qui, comme d'habitude, est document.getElementById. Bien sûr, l'ID est MyCanvas, et ensuite la variable de contexte, que nous considérons comme ctx. Gardons-le cohérent. Le contexte est équivalent à Canvas.getContext. Maintenant, j'utilise le contexte 2D. La première chose que je vais faire est de créer une image. Ce sera une image en couleur que nous pourrons ensuite travailler avec les pixels et la transformer en niveaux de gris. Espérons que vous avez atteint ce point au moins et que vous avez réussi à ajouter une image à l'écran. L' image variable est égale à une nouvelle image. Une fois cette image chargée avec image.onload, nous allons déclencher une fonction. Cette fonction va d'abord dessiner l'image à l'écran, puis une deuxième chose que nous voulons faire est de déclencher une deuxième fonction, que je vais appeler niveaux de gris. Tout d'abord, dessinons l'image sur la toile, avec ctx.drawImage. Nous n'avons pas encore créé la source d'image, mais nous allons juste mettre la variable d'image à l'intérieur. Nous commencerons la position à 0, 0, qui est le coin supérieur gauche. Ensuite, image.src, qui est le chemin d'accès du fichier. Allons à Wikipédia. Je vais prendre une image à partir de là pour l'utiliser. Celui-ci ne va pas bien, c'est noir et blanc pour commencer. Trouvons une image appropriée. Essayons le contenu en vedette. Celui-ci est très bien. Cliquez ensuite avec le bouton droit et copiez l'adresse de l'image et collez-le dans la source de l'image Il y a une image qui apparaît à l'écran, tout fonctionne bien. Ensuite, ce que j'ai fait ensuite était de créer une fonction en niveaux de gris. Nous allons créer cela dans un instant, mais tout d'abord je vais l'appeler dans cette fonction. Il vous suffit de taper les niveaux de gris, puis les crochets. Cela appellera la fonction d'échelle de gris une fois l'image chargée. Maintenant, créons cette fonction en niveaux de gris. Qu' est-ce que cette fonction à faire, c'est d'abord que nous aimerions saisir les données d'image, qui est fondamentalement la pleine taille de la toile. On veut saisir toute la zone. Ensuite, nous voulons exécuter la boucle for, d'une manière similaire à la dernière vidéo où nous parcourons toutes les données de pixel. Comme mentionné dans l'introduction, nous allons faire la moyenne des canaux rouges, verts et bleus pour nous donner un effet de niveaux de gris. La dernière chose que je veux que la fonction d'échelle de gris fasse, est de remettre le tableau de pixels modifié ou les pixels noirs et blancs sur la toile en profitant de la méthode de données d'image de mise. Commençons par créer une variable de données d'image . Ceci est équivalent à CTX.GetImageData. Nous allons commencer dans le coin supérieur gauche de la toile, puis nous allons saisir toute la largeur de la toile, ainsi que la hauteur de la toile. Cela va stocker les données de l'image. Je vais créer une variable de plus, simplement appelée données. Je veux définir ceci pour être ImageData.Data. Nous n'avons pas besoin de créer cette variable, la seule raison pour laquelle je l'ai fait est parce que nous utilisons beaucoup ImageData.Data lors de l'utilisation de la boucle for. C' est juste un peu plus court en stockant dans une variable de données. Ensuite, nous sommes prêts à créer notre boucle for. La boucle for peut être à peu près la même que celle de la dernière vidéo, où nous avons examiné la modification des pixels. Nous allons définir la variable i sur 0 pour commencer, et nous allons garder la boucle pendant que i est inférieur aux données, qui est cette variable ici, .length. Cette variable de données est juste une version courte de l'écriture d'imageData.Data.Length. Ensuite, je plus ou égale 4. Si vous vous souvenez que c'est parce que chaque pixel a quatre canaux. Avant de commencer à modifier les canaux rouges, verts et bleus individuels , je vais créer une variable appelée moyenne. Il s'agit de la valeur moyenne du canal rouge, vert et bleu. Définissons cela égal aux données et aux crochets i. Ceci est le premier canal qui est rouge, l'ajouter au vert, et bleu. Données i plus 1, puis données i plus 2. C' est le rouge, le vert et le bleu. Ajoutez les trois valeurs ensemble, puis divisez-le par 3 pour obtenir la moyenne. Commençons par la valeur rouge. Les données sur le premier sont i, si vous vous souvenez de la dernière vidéo, nous définissons cette valeur entre 0-255. Mais cette fois, nous allons juste le mettre à la variable moyenne. Ensuite, faisons ça deux fois de plus, pour le vert, et le bleu. Je plus 1 et je plus 2, puis je déplaçant vers le bas. Assurez-vous que cela est en dehors de la boucle maintenant. Nous devons remettre ces données d'image sur la toile, avec CTX.PutimageData. Les données que nous voulons extraire sur le canevas sont cette variable de données d'image. Sur la position, est le coin supérieur gauche, qui est 0, 0, puis enregistrez cela. Vous remarquez après avoir fait que nous n'avons toujours pas de changement à la toile. Si vous vous souvenez avant, nous avons mentionné que nous devons ajouter une ligne de code, qui était les attributs d'origine croisée. Ajoutons ceci juste en haut maintenant. Image.CrossOrigin. Je vais mettre ça sur anonyme et ensuite enregistrer ça. Vous pouvez voir instantanément l'effet a eu lieu. Cette ligne de code nous a permis d'utiliser une image provenant d'une source différente sans lancer d'erreurs. Allons juste étendre cela pour que vous puissiez voir. Si nous commentons les données de l'image de mise, nous devrions récupérer l'image couleur originale que nous faisons. Si vous vouliez travailler avec des effets différents, plutôt que d'avoir les trois canaux réglés sur la moyenne, vous pouvez changer cela pour être quelque chose entre 0 et 255, et vous pouvez voir l'effet là. C' est une façon de relever ce défi et, bien sûr, il y a de nombreuses façons de le faire. Mais l'essentiel est de lui donner un objectif et d'essayer d'apprendre de toutes les erreurs. que le défi est terminé maintenant, passons maintenant à la prochaine vidéo et nous allons jeter un coup d'œil sur la boucle. 22. Se perfectionner : boucler: J' espère que vous avez apprécié le dernier défi et bienvenue. On va mieux regarder les bouclages. Je vais vous montrer comment nous pouvons créer un effet similaire à celui-ci en utilisant for-loops, la méthode translate et aussi tourner. C' est le résultat final que nous cherchons à atteindre et c'est essentiellement un arc rouge ou un cercle rouge qui est le fond. Ensuite, nous allons créer un segment, qui est la section triangle noir. Nous allons dessiner ceci sur le canevas, puis utiliser une boucle pour faire une boucle tout autour et continuer à dessiner les segments jusqu'à ce que nous revenions au début. Chaque fois que nous utilisons la rotation et la traduction pour nous assurer que le nouveau segment dessiné est dans la bonne position. Allons à CodePen. Plutôt que d'utiliser les modèles de défi, je vais faire le travail avec Pixel Video, juste pour que nous ayons un modèle avec lequel travailler. Appelons ça Looping. Ensuite, vous voulez changer le canevas pour être 600 par 600 pour commencer, puis effacons tout sauf les deux variables en haut et aussi la fonction onload. On y va. On est bien d'y aller maintenant. Ce que je vais commencer par est le cercle de fond rouge en utilisant la méthode arc. On va rendre le mien rouge. Nous avons CTX.fillStyle pour être égal au rouge et créer l'arc et ce sera un cercle complet. Les coordonnées de départ ne dérangeront pas d'être au milieu du canevas. Je vais utiliser toile.width divisé par 2 au point central, puis toile.hauteur diviser par 2 pour commencer notre arc au centre de la toile. Le rayon que nous voulons faire 230. La position de départ zéro, et pour créer le cercle complet, c'est 2 fois Math.pi. Ensuite, remplissons automatiquement pour dessiner cela sur le canevas. Juste comme ça. Ce n'est pas dessiné, donc il doit y avoir une erreur de frappe quelque part. Juste là, qui est la hauteur de la toile. Bien. Maintenant, nous avons le cercle rouge de fond. Ensuite, nous pouvons travailler sur le dessin des segments noirs que nous voulons boucler. Créons une fonction pour ce faire. Je vais appeler mes segments de dessin de fonction, puis le code entre les accolades. Commençons par BeginPath, puis nous utilisons CTX.moveTo. Vous voulez passer au centre de la toile, donc nous utilisons la largeur et la hauteur de la toile divisée par 2 pour nous donner les points de départ. Maintenant, nous allons définir le style de remplissage pour être noir. Pour dessiner les segments ou créer des segments, nous allons utiliser un arc. Celui-ci doit être au centre de la toile. Ajoutons ceci là-dedans. Le rayon que nous voulons faire 230, ce qui est le même qu'un arrière-plan. Ensuite, nous devons définir le point de départ et le point de fin pour chacune des sections. Le point de départ sera la position de 12 heures. Donc c'est 1,5 multiplié par Math.pi. C' est assez simple. L' angle de fin demande un peu plus de réflexion. Nous avons 12 sections différentes dans le cercle. On a les six sections noires et les six sections rouges. Une rotation complète de l'arc est 2 fois Math.pi. Nous pouvons diviser ces deux, qui est un cercle complet à diviser par les 12 sections et cela nous donne un volume de 0,16666, puis nous pouvons ajouter cette valeur à l'original 1.5. Nous allons partir de la position de 12 heures, puis nous allons faire le tour un peu plus loin pour créer les segments. Donc 0,16 plus 1,5 nous donne la valeur de 1,6666 multipliée par Math.pi, et cela devrait nous donner nos segments. Ensuite, nous devons remplir les segments avec la méthode de remplissage pour dessiner sur la toile. Ensuite, appelons une fonction, juste en dessous. Dessinez nos segments, et ils devraient ajouter les segments. Là, nous allons, dit le premier que nous devons ajouter. Le point de départ est cette ligne ici, qui est 1,5 fois Math.pi. Lorsqu' il est ajouté à cette valeur, 0.106, qui représente un douzième du rayon de canevas, qui est le point final juste ici. C' est notre première section dessinée sur la toile. Plutôt que de taper tout ce code encore et encore, un moyen plus simple de le faire est d'utiliser une boucle for-. Entourons l'ensemble de la fonction avec une boucle for-. Commençons juste par la ligne de fonction, puis terminons-la après dessiner des segments. Je vais juste mettre la section en retrait. C' est la boucle de base, et pour éviter d'écraser le navigateur, nous allons juste laisser la boucle for-vide pour l'instant. Mais nous pouvons aller de l'avant et ajouter la traduction et la rotation, que vous voulez effectuer sur chaque boucle. Sous dessiner des segments, et toujours dans la boucle, nous allons ajouter une méthode de translation, ctx.translate. Je vais traduire au centre de la toile pour chaque rotation. Si nous n'utilisons pas translate en premier, le point de rotation est l'origine du canevas, qui est le coin supérieur gauche. Assurez-vous d'ajouter cette toile.largeur et toile.hauteur divisée par 2. Ensuite, nous voulons réellement que le segment soit tourné. Je veux que cela tourne de 60 degrés sur chaque boucle. Rappelez-vous que l'utilisation de la rotation est en radians, donc pour convertir en degrés, nous multiplions la valeur par math.pi diviser par 180. Enfin, nous devons appeler traduire à nouveau pour rétablir la position à l'origine. Nous voulons traduire cela par négatif 300, et cela traduit l'origine à 00. Donc, chaque fois qu'on appelle ça traduire, on n'a aucun problème. Maintenant, nous pouvons aller de l'avant et créer le reste de la boucle pour. Je vais juste [inaudible] la boucle for-ou nous ajoutons les conditions afin que nous ne finissions pas par provoquer un écrasement dans CodePen. Tout d'abord, créons notre variable de i égal à zéro, donc ce sont les points de départ de la boucle. Nous avons déjà un segment dessiné à l'écran à partir de la fonction d'origine. Répétons cela cinq fois de plus en utilisant i est moins de six. Ensuite, pour incrémenter cette fois sur chaque boucle, nous utilisons i plus. Nous pouvons aller de l'avant et [inaudible] cette boucle pour, et ensuite nous pouvons courir. Là, nous l'avons. Donc, cela fonctionne exactement comme nous le voulons. Juste comme un résumé rapide, nous avons créé un cercle de fond rouge en utilisant la méthode arc. Nous avons ensuite appelé une fonction appelée segments de dessin, puis cette fonction a dessiné une section noire sur le canevas. Nous avons ensuite entouré la fonction avec une boucle pour répéter la section noire cinq fois de plus, et à chaque rotation nous faisons pivoter le segment de 60 degrés, et aussi à chaque rotation, nous avons traduit l'origine de la toile le centre plutôt que dans la position par défaut en haut à gauche. Ensuite, après chaque rotation, nous le traduisons afin que nous n'ayons aucun problème. C' est un autre petit regard sur la boucle avec la toile. Revenez dans la prochaine vidéo, où nous allons prendre ce que nous venons de dessiner et ajouter des effets d'animation. 23. Se perfectionner : animer: Bienvenue les gars. Dans la dernière vidéo, nous avons créé ce bloc et le motif rouge, que vous pouvez voir sur le côté droit. Nous y sommes parvenus en créant un fond rouge, puis nous avons utilisé une boucle for pour dessiner les segments de bloc, puis nous avons bouclé et répété six fois. Dans cette vidéo, nous allons aller plus loin et jeter un oeil à l'animation. En particulier, nous allons jeter un oeil à la méthode d'intervalle de jeu, qui va tourner à l'ouverture, et les résultats finaux ressembleraient à ceci. Ce n'est pas vraiment si difficile de créer cet effet lors de l'utilisation de l'intervalle défini. Commençons par créer son propre stylo. Pour la dernière vidéo, et je vais appeler ça animation, juste comme ça. Nous pouvons réutiliser tout le code de la dernière vidéo. Ce que nous allons essentiellement faire est d'envelopper tout le code existant dans une fonction , puis de passer cette fonction dans la méthode d'intervalle défini à un délai spécifié. Pour commencer, nous devons envelopper le code existant dans une fonction. Juste en dessous de notre variable contacts, créez une fonction, et cela vous allez appeler rotation. Ensuite, nous devons ajouter les accolades, alors ajoutez l'accolade bouclée d'ouverture. Ensuite, en bas, nous pouvons ajouter l'accolade de fermeture, juste ici. Je suis de retour au sommet. Nous avons juste besoin d'ajouter une ou deux lignes dans cette fonction juste pour le faire fonctionner correctement. La première chose que nous devons faire est de créer les points de référence au centre de la toile. Utilisons ctx.translate. Tout ce que nous voulons faire, c'est traduire au centre de la toile, comme nous l'avons fait plusieurs fois auparavant. Ajoutons ceux-ci à l'intérieur des crochets. Maintenant, nous avons le point de référence au centre de la toile. Ensuite, nous voulons créer une méthode de rotation. Nous allons faire pivoter d'un degré à chaque fois qu'une méthode d'intervalle défini est appelée. Ajoutons simplement Math.Pi divisé par 180, et c'est l'équivalent d'un degré. Ensuite, comme nous l'avons fait dans la dernière vidéo où nous avons traduit, tourné, puis traduit à l'origine, nous devons ajouter une seconde traduction pour traduire à l'origine à chaque rotation. Nous pouvons faire la même chose que le premier, mais au lieu de cela, nous pouvons utiliser négatif juste pour revenir à l'origine. Cela se traduit en haut, peut ensuite se déplacer à la bonne position. Je vais juste indenter ce code juste comme ça. Ensuite, pour que cela fonctionne réellement, provoquez également la rotation juste au-dessus de la dernière accolade bouclée, qui est pour la fonction de rotation. Nous devons ajouter un intervalle de jeu, puis il faut deux paramètres. Le premier est la fonction de rotation, qui sera créée. Vous pouvez voir que ça va vraiment plus vite. Le deuxième paramètre est le délai spécifié en millisecondes. Passons ça à 30, et on peut le ralentir un peu. Bien sûr, cela peut être changé pour vous et si vous voulez que vous préférez. changement à 300 le rend vraiment lent, alors changeons juste à ce sujet. Il est en fait assez simple de créer une animation en utilisant l'intervalle défini. Juste pour résumer, nous utilisons le dessin de la dernière vidéo et l'entourons à l'intérieur d'une fonction de rotation. Nous avons ajouté une, deux lignes de code. Nous avons commencé avec la méthode de traduction, qui a fait en sorte que le point de référence était au centre de la toile. Nous tournons ensuite d'un degré, chaque intervalle de temps est appelé, puis nous nous sommes assurés que nous avons traduit à l'origine afin qu'il ne pose aucun problème à chaque fois que nous passons au centre. Ensuite, nous avons passé dans la fonction de rotation pour définir l'intervalle, puis l'arrêter de passer de vrai rapide. Nous avons ajouté un délai de 30 millisecondes juste pour ralentir les choses, juste comme ça. C' est ainsi que nous pouvons utiliser l'intervalle défini pour créer une animation. Nous allons maintenant passer au projet final, ou nous amuser un peu en dessinant un visage de Mickey Mouse. Je te verrai là-bas. 24. Projet final : introduction: Donc, une grande félicitations de ma part pour avoir atteint la fin de ce cours. Donc, comme un peu d'exercice amusant, j'aimerais vous défier de dessiner un visage de Mickey Mouse. Maintenant, il n'a pas besoin d'être parfait, l'idée est juste de vous donner quelque chose à pratiquer, qui implique certaines des techniques que nous avons examinées tout au long de ce cours et cela vous donne aussi une chance de penser à des choses vous plutôt que de taper avec moi. Donc c'est ce que je viens avec et c'est ce que j'aimerais que tu crées. Donc, je recommande de trouver une simple photo de Mickey Mouse, juste pour copier à partir de. Donc, une petite astuce que vous pouvez trouver utile est avant de dessiner les courbes pour beaucoup de visage, vous pouvez trouver cela beaucoup plus facile en créant quelques petits arcs comme points de référence. Par exemple, le point de début et de fin d'une courbe, et c'est ce que je fais lors de la création de cet exemple et d'avoir ces points de référence à portée de main rend vraiment les choses beaucoup plus faciles lors du dessin des courbes. Alors allez-y et passez un peu de temps à essayer de reproduire cela, et ne vous inquiétez pas si vous avez des difficultés avec l'un de ces chemins. Parce que dans la vidéo suivante, je vais vous montrer la solution à la façon dont j'ai créé ceci. Alors bonne chance. 25. Projet final : dessiner Mickey !: Bienvenue à tout le monde. J'espère que vous avez eu du succès avec ce défi et que vous partagez ce que vous avez créé, et j'aimerais les voir. Maintenant, je vais vous expliquer exactement ce que j'ai fait pour créer ça, juste au cas où vous auriez des problèmes en cours de route. La première chose que j'ai faite était de créer une fonction appelée AddReferencePoints, et cette fonction contenait tous les points de référence que vous pouvez voir sur le côté droit. Je crée ces points de référence pour rendre la vie un peu plus facile lors de la création des arcs et aussi des courbes, et à partir de ceux-ci, la fonction un par un, tout comme nous dessinions sur les courbes plus bas dans le code. bas en dehors de la fonction, c'est l'appel à la fonction pour réellement dessiner tous les points de référence sur l'écran, et la raison pour laquelle tous les points de référence sont contenus dans la fonction est donc que nous pouvons simplement commenter tous les l'appel à la fonction quand nous voulons les supprimer, juste comme ça. J' ai commencé par créer une largeur de ligne de trois pixels, puis un tracé, puis je suis arrivé à travailler sur le haut du contour de la tête. Nous avons utilisé la méthode de l'arc pour dessiner le côté extérieur de la tête aux points de départ et de fin, que nous avons ajouté à l'intérieur d'ici. Ensuite, la chose que j'ai faite, c'était de créer l'oreille gauche. Il suffit de commenter cette section. Création d'un arc une fois de plus en utilisant 2 fois Math.pi pour créer un cercle complet. Je suis ensuite passé à répéter pour l'oreille sur le côté droit. Au fur et à mesure de ce projet, vous remarquerez que beaucoup de coordonnées sont symétriques. Nous avons une ligne au centre qui est 300 pixels donc beaucoup de coordonnées sont égales sur le côté gauche, comme vous l'avez sur le côté droit, donc c'est juste un cas de travail sur un côté, et puis c'est beaucoup plus facile de créer la même chose sur l'autre. Puis nous avons commencé à nous déplacer à l'intérieur du visage. Nous avons l'interface, qui est l'arc supérieur gauche et l'arc supérieur droit. Vous pouvez voir que j'ai fait un commentaire que les coordonnées auxquelles nous faisons référence sont les points 1, 2 et 3 qui sont disponibles à l'intérieur de la fonction en haut. Nous avons d'abord créé ces points, puis les avons ajoutés à l'intérieur de la méthode BezierCurveTo. Étape suivante, je crée les points de référence pour la joue gauche et aussi pour la joue droite. J' ai déjà parlé de la ligne symétrique, qui est de 300 pixels sur l'axe X. Nous pouvons ensuite utiliser cette ligne pour nous assurer que chaque côté du visage est uniforme. La joue gauche est de 40 pixels de moins de 300, la joue droite est de 40 pixels plus élevée, ce qui crée un effet symétrique. Ensuite, je descends vers le menton. Pour créer cet effet, nous déplaçons le stylo à l'emplacement spécifié, et cette fois utilisez une méthode QuadraticCurveTo plutôt qu'une BezierCurve, simplement parce qu'un point de contrôle était abondant pour la section, et c'est commun à tous les section. Cette partie est la courbe qui se trouve au-dessus du nez, et les yeux reposent sur le dessus. Encore une fois, parce que c'est une ligne simple, nous avons utilisé une QuadraticCurve, et maintenant nous avons cette courbe. Nous avons maintenant une position pour travailler sur les yeux, donc la gauche, sur l'œil droit, nous venons d'ajouter les suivants, et ce sont les contours. J' ai utilisé une méthode ellipse, que nous n'avons pas encore examinée dans ce cours, mais cela le rend beaucoup plus facile que d'essayer d'utiliser un certain type de courbe pour créer cela. J' ai ajouté dans les paramètres juste au-dessus, si vous voulez jeter un oeil à ceux-ci. Nous avons un centre x et y, tout comme lors de l'utilisation d'un arc. Nous avons le rayon x et y, donc le rayon est l'axe principal, et le rayon y est l'axe mineur. Nous pouvons également ajouter une rotation à l'ellipse, c'est en radians. Nous sommes alors le start et endAngle, et ils ont un paramètre optionnel à la fin, si nous voulons qu'il soit dessiné dans le sens des aiguilles d'une montre ou dans le sens antihoraire. C' est le contour des yeux. Nous utilisons ensuite la même méthode d'ellipse pour dessiner le nez, puis revenons à la courbe quadratique, à l'arc pour la bouche. Il y a deux arcs différents que nous allons créer. L' un est la partie supérieure de la bouche et ensuite on a la partie inférieure de la bouche. Pour ajouter quelques détails sur la langue, nous créons deux autres QuadraticCurvetos pour donner l'effet de langue à l'intérieur de la bouche. Ensuite, la chose que j'ai faite était de créer une courbe juste à la fin de chaque section de la bouche, juste comme ça. Tous ces éléments ont l'effet de trait, donc nous ajoutons le trait, juste au bas de tous ces éléments. Ensuite, nous devons commencer un nouveau chemin, et la raison pour laquelle nous devons le faire est que tous les éléments d' ici ont un remplissage plutôt qu'un trait. Tout d'abord, nous avons l'œil gauche, et encore une fois nous utilisons la méthode ellipse, mais cette fois nous avons ajouté un peu d'angle juste pour créer l'effet que nous recherchons. Nous avons ensuite répété sur le côté droit pour l'œil droit, puis les avons tous dessinés sur la toile avec la méthode du film à la toute fin. Enfin, nous avons ajouté du texte à la fin juste avec les mots de Mickey Mouse, et nous avons ajouté quelques alignements de base ainsi que des polices et des remplissages de couleur. C' est comme ça que je crée mon visage Mickey Mouse et me rappelle le numéro, il n'y a pas de bonne ou de mauvaise façon de le faire. Tout le monde adopte des approches différentes, mais l'essentiel est que vous parvenez à dessiner quelque chose qui ressemble à Mickey Mouse. C' est tout pour la fin de ce projet. Veuillez partager ce que vous avez créé. Merci de regarder et au revoir pour l'instant. 26. Merci: Merci de vous joindre à moi sur ce cours. J' espère que vous l'avez apprécié et que vous en avez beaucoup appris. Nous avons couvert tellement de terrain, y compris comment installer le Canvas. Nous avons ensuite examiné les scripts de base sur la façon de dessiner des formes telles que des rectangles. Nous avons abordé la façon de comprendre les coordonnées du Canvas. Nous avons également examiné les lignes et les tracés et l'importance de marcher jusqu'aux pixels pour créer des arêtes nettes. Nous avons examiné diverses autres techniques telles que les coins et les mètres, les arcs et les cercles. Comment ajouter du texte à la canevas et aussi des dégradés. Nous avons terminé la section de base Canvas en ajoutant des images à la toile ainsi que des casseroles et des ombres. Nous avons ensuite augmenté un peu en passant à la section suivante, où nous avons commencé à examiner différents types de courbes, comme Bézier et les courbes quadratiques. Nous avons également couvert les méthodes de sauvegarde et d'installation et la façon de les utiliser correctement. Avec diverses transformations telles que la mise à l'échelle, la rotation et la traduction. Vous devez maintenant comprendre comment travailler avec les pixels et comment accéder aux données de pixel d'une image, puis utiliser ces données de pixel pour manipuler l'image afin de créer un effet tel que la conversion d'une image en niveaux de gris. Nous avons également examiné comment Looping peut rendre les tâches répétitives beaucoup plus simples et comment animer nos dessins pour vraiment les donner vie. Alors j'espère qu'à la fin du cours, vous serez en mesure d'avoir du succès, nous tirons sur le visage de Mickey Mouse, pour mettre en pratique tout ce que vous avez appris du cours. Donc pour moi, au revoir pour l'instant, et j'espère que je te reverrai dans le futur cours. 27. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare. Aussi, suivez-moi pour toute mise à jour et aussi pour être informé de toute nouvelle classe à mesure qu'ils deviennent disponibles. Alors merci encore une fois. Bonne chance. J' espère que je te reverrai dans un futur cours.