Avant de commencer à dessiner, nous devons parler de la grille de toile ou de l'espace de coordonnées . Le modèle HTML de la page précédente avait un élément en toile de 150 pixels de large et 150 pixels de haut. J'ai dessiné cette image avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur la toile. L'origine de cette grille est positionnée dans le coin supérieur gauche (coordonnée (0,0)). Tous les éléments sont placés par rapport à cette origine. Ainsi, la position du coin supérieur gauche du carré bleu devient x pixels des pixels gauche et y du haut (coordonnée (x, y)). Plus tard dans ce tutoriel, nous verrons comment nous pouvons traduire l'origine à une position différente, faire pivoter la grille et même l'étendre. Pour l'instant, nous resterons à la valeur par défaut.
Avant de vraiment commencer, nous devons explorer la grille ou les coordonnées de la toile. Il y a une largeur de 150 pixels et 150 pixels de haut dans le modèle HTML sur la page précédente. Je superpose la grille par défaut sur l'écran, comme indiqué dans l'image à droite. Habituellement, une cellule de la grille correspond à un pixel sur la toile. L'origine de la grille est positionnée dans le coin supérieur gauche (coordonnées (0,0)). Les positions de tous les objets de l'image sont relatives à cette origine. De cette façon, la position du carré bleu dans le coin supérieur gauche est le pixel x du pixel gauche et y du côté supérieur (coordonnées (x, y)). Dans le tutoriel suivant, nous apprendrons à déplacer l'origine, à tourner et à évoluer la grille. Mais maintenant, nous utiliserons l'état par défaut.
Contrairement à SVG, Canvas ne prend en charge qu'une forme primitive - rectangles. Toutes les autres formes doivent être créées en combinant un ou plusieurs chemins. Heureusement, nous avons une collection de fonctions de dessin de chemin qui permettent de composer des formes très complexes.
Contrairement à SVG, Canvas ne prend en charge qu'une forme de base - rectangle, de sorte que d'autres formes sont composées d'un ou plusieurs chemins. Heureusement, il existe un ensemble de fonctions de dessin de chemin qui nous permettent de dessiner des formes assez complexes.
Regardons d'abord le rectangle. Il y a trois fonctions qui dessinent des rectangles sur la toile:
Regardons d'abord le rectangle. Il existe trois fonctions pour dessiner des rectangles:
Fillrect (x, y, largeur, hauteur): dessine un rectangle rempli starekect (x, y, largeur, hauteur): dessine un contour rectangulaire ClearRect (x, y, largeur, hauteur): efface la zone spécifiée et la rend entièrement transparenteChacune de ces trois fonctions prend les mêmes paramètres. X et Y spécifient la position sur la toile (par rapport à l'origine) du coin supérieur gauche du rectangle. La largeur et la hauteur sont assez évidentes. Voyons ces fonctions en action.
Ils acceptent tous quatre paramètres, X et Y spécifient la position du coin supérieur gauche du rectangle (par rapport à l'origine), et la largeur et la hauteur sont la largeur et la hauteur du rectangle. Ok, faisons quelques batailles pratiques.
Vous trouverez ci-dessous la fonction Draw () de la page précédente, mais maintenant j'ai ajouté les trois fonctions ci-dessus.
Ce qui suit est la fonction Draw () dans le modèle de la page précédente, mais les trois fonctions ci-dessus sont ajoutées.
Afficher l'exemple
function draw () {var canvas = document.getElementById ('tutoriel'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); CTX.Fillrect (25,25,100,100); CTX.ClearRect (45,45,60,60); ctx.strokect (50,50,50,50); }}Le résultat devrait ressembler à l'image à droite. La fonction Fillrect dessine un grand carré noir 100x100 pixels. La fonction ClearRect supprime un carré de 60x60 pixels du centre et finalement le starecartet dessine un contour rectangulaire 50x50 pixels à l'intérieur du carré nettoyé. Dans les pages suivantes, nous verrons deux méthodes alternatives pour la fonction ClearRect et nous verrons également comment modifier le style de couleur et de course des formes rendues.
Le résultat doit être le même que celui à droite. La fonction Fillrect dessine un grand rectangle noir (100x100), la fonction ClearRect efface le carré de la taille de 60x60 au milieu, puis la fonction de starect décrit une bordure rectangulaire 50x50 dans l'espace nettoyé. Dans la page suivante, nous verrons deux autres méthodes similaires à la fonction ClearRect, ainsi que comment modifier la couleur de remplissage et de bordure de la figure.
Contrairement aux fonctions de chemin que nous verrons dans la section suivante, les trois fonctions rectangulaires s'inspirent immédiatement du canevas.
Contrairement à la fonction de chemin dans la section suivante, les effets de ces trois fonctions seront immédiatement reflétés sur le toile.
Pour faire des formes à l'aide de chemins, nous avons besoin de quelques étapes supplémentaires.
Contrairement à dessiner un rectangle, le dessin d'un chemin nécessite quelques étapes supplémentaires.
BeginPath () ClosePath () accident vasculaire cérébral () remplir ()La première étape pour créer un chemin est d'appeler la méthode de début. En interne, les chemins sont stockés comme une liste de sous-pains (lignes, arcs, etc.) qui forment ensemble une forme. Chaque fois que cette méthode est appelée, la liste est réinitialisée et nous pouvons commencer à dessiner de nouvelles formes.
La première étape consiste à créer un chemin avec BeginPath. En mémoire, les chemins sont stockés sous la forme d'un ensemble de sous-chers (lignes, arcs, etc.), qui forment ensemble un graphique. Chaque fois que Beginpath est appelé, le groupe de sous-chemin est réinitialisé et un nouveau graphique peut être dessiné.
La deuxième étape consiste à appeler les méthodes qui spécifient réellement les chemins à suivre. Nous les verrons sous peu.
La deuxième étape consiste à dessiner la partie du chemin, ce que nous verrons bientôt.
La troisième, et une étape facultative, serait d'appeler la méthode RostEpath. Cette méthode essaie de fermer la forme en dessinant une ligne droite du point actuel au début. Si la forme a déjà été fermée ou qu'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.
La troisième étape consiste à appeler la méthode ClosePath, qui essaiera de connecter le point de terminaison actuel au point de terminaison de départ avec une ligne droite pour fermer le chemin, mais si le graphique est déjà fermé ou qu'il n'y a qu'un seul point, il ne fera rien. Cette étape n'est pas nécessaire.
La dernière étape sera d'appeler les méthodes de course et / ou de remplissage. Appeler l'un d'eux attirera réellement la forme sur la toile. Un trait est utilisé pour dessiner une forme décrite, tandis que le remplissage est utilisé pour peindre une forme solide.
La dernière étape consiste à appeler la méthode de course ou de remplissage, et à ce moment, le graphique est réellement dessiné sur la toile. La course est la bordure qui dessine la figure, le remplissage le remplira avec une silhouette solide.
Remarque: Lors de l'appel de la méthode de remplissage, toutes les formes ouvertes seront fermées automatiquement et il n'est pas nécessaire d'utiliser la méthode ClosePath. Remarque: Lorsque le remplissage est appelé, le chemin ouvert se ferme automatiquement sans appeler Rserpath.Le code pour une forme simple de dessin (un triangle) ressemblerait à quelque chose comme ça.
Le code pour dessiner une figure simple (comme un triangle) est le suivant.
ctx.beginpath (); ctx.moveto (75,50); ctx.lineto (100,75); ctx.lineto (100,25); ctx.fill ();
Une fonction très utile, qui ne dessine rien, mais fait partie de la liste de chemins décrite ci-dessus, est la fonction MoveTo. Vous pouvez probablement le considérer comme soulever un stylo ou un crayon à partir d'un seul endroit sur un morceau de papier et le placer sur le suivant.
MoveTo est une méthode très utile. Bien qu'il ne puisse pas être utilisé pour dessiner quoi que ce soit, il fait partie d'une façon pratique de dessiner des chemins. Vous pouvez le considérer comme le processus de levée du stylo et de le déplacer d'un point à un autre.
MoveTo (x, y)La fonction MoveTo prend deux arguments - x et y, - qui sont les coordonnées du nouveau point de départ.
Il accepte X et Y (nouvelles positions de coordonnées) comme paramètres.
Lorsque la toile est initialisée ou que la méthode BeginPath est appelée, le point de départ est défini sur la coordonnée (0,0). Dans la plupart des cas, nous utiliserions la méthode MoveTo pour placer le point de départ ailleurs. Nous pourrions également utiliser la méthode MoveTo pour dessiner des chemins non connectés. Jetez un œil au visage souriant à droite. J'ai marqué les endroits où j'ai utilisé la méthode MoveTo (les lignes rouges).
Lorsque le canevas est initialisé ou que Beginpath est appelé, le paramètre de coordonnées de démarrage est l'origine (0,0). Dans la plupart des cas, nous utilisons la méthode MoveTo pour déplacer les coordonnées de démarrage vers d'autres endroits, ou pour dessiner des chemins discontinus. Regardez la face souriante à droite, la ligne rouge est la trajectoire du déplacement à l'aide de MoveTo.
Pour essayer ceci par vous-même, vous pouvez utiliser l'extrait de code ci-dessous. Collez-le simplement dans la fonction de tirage que nous avons vue plus tôt.
Essayez le code suivant et collez-le dans la fonction Draw que vous avez utilisée avant pour voir l'effet.
ctx.beginpath (); ctx.arc (75,75,50,0, math.pi * 2, true); // Circuitx.Moveto (110,75); CTX.ARC (75,75,35,0, math.pi, false); // bouche (dans le sens horaire) CTX.moveto (65,65); ctx.arc (60,65,5,0, math.pi * 2, true); // gauche eyectx.moveto (95,65); ctx.arc (90,65,5,0, math.pi * 2, true); // droit eyectx.stroke ();Remarque : Retirez les méthodes MoveTo pour voir les lignes de connexion. Remarque : Pour une description de la fonction d'arc et ses paramètres regardent ci-dessous. Remarque: Vous pouvez commenter la méthode MoveTo pour observer les lignes connectées. Remarque: L'utilisation de la méthode ARC est indiquée ci-dessous.
Pour dessiner des lignes droites, nous utilisons la méthode Lineto.
Nous utilisons la méthode LineTo pour tracer des lignes droites.
lineto (x, y)Cette méthode prend deux arguments - x et y, - qui sont les coordonnées du point final de la ligne. Le point de départ dépend des chemins dessinés précédents, où le point final du chemin précédent est le point de départ pour les éléments suivants, etc. Le point de départ peut également être modifié en utilisant la méthode MoveTo.
La méthode LineTo accepte les coordonnées (x, y) du point final en tant que paramètre. La coordonnée de démarrage dépend du chemin précédent. Le point final du chemin précédent est le point de départ du chemin actuel. La coordonnée de démarrage peut également être définie via la méthode MoveTo.
Dans l'exemple ci-dessous, deux triangles sont dessinés, un rempli et un décrit. (Le résultat peut être vu dans l'image de droite). Tout d'abord, la méthode BeginPath est appelée pour commencer un nouveau chemin de forme. Nous utilisons ensuite la méthode MoveTo pour déplacer le point de départ vers la position souhaitée. En dessous de ces deux lignes sont tracées qui composent les deux côtés du triangle.
L'exemple (comme indiqué dans l'image à droite) est deux triangles, un rempli de couleur unie et un bord dessiné. Tout d'abord, appelez la méthode BeginPath pour créer un nouveau chemin, puis utilisez la méthode MoveTo pour déplacer la coordonnée de démarrage vers la position souhaitée, puis tracer deux lignes droites pour former les deux côtés du triangle.
Vous remarquerez la différence entre le triangle rempli et caressé. Ceci est, comme mentionné ci-dessus, car les formes sont automatiquement fermées lorsqu'un chemin est rempli. Si nous avions fait cela pour le triangle caressé, seuls deux lignes auraient été tracées, pas un triangle complet.
Vous pouvez remarquer la différence entre les triangles de dessin de remplissage et de Strok. Comme mentionné ci-dessus, le chemin utilisant le remplissage se ferme automatiquement, mais il ne le sera pas avec une course. Si le chemin n'est pas fermé, seuls deux côtés seront dessinés.
Afficher l'exemple
// remplit triangle ctx.beginpath (); ctx.moveto (25,25); ctx.lineto (105,25); ctx.lineto (25,105); ctx.fill (); // Tick triangle ctx.beginpath (); ctx.moveto (125,125); ctx.lineto (125,45); ctx.lineto (45,125); ctx.closepath (); ctx.stroke ();
Pour dessiner des arcs ou des cercles, nous utilisons la méthode d'arc. La spécification décrit également la méthode ARCTO, qui est prise en charge par Safari mais n'a pas été implémentée dans les navigateurs Gecko actuels.
Nous utilisons la méthode d'arc pour dessiner des arcs ou des cercles. La méthode Arcto est également incluse dans la description standard. Safari est actuellement pris en charge, mais les navigateurs basés sur Gecko n'ont pas encore mis en œuvre.
arc (x, y, rayon, startangle, endangle, dans le sens antihoraire)Cette méthode prend cinq paramètres: x et y sont les coordonnées du centre du cercle. Le rayon est l'explication de soi. Les paramètres Startangle et Endangle définissent les points de début et d'extrémité de l'arc dans les radians. L'angle de démarrage et de clôture est mesuré à partir de l'axe x. Le paramètre dans le sens anticipé est une valeur booléenne qui, lorsqu'elle est vrai, tire l'arc dans le sens anticipé, sinon dans le sens des aiguilles d'une montre.
La méthode accepte cinq paramètres: x, y est la coordonnée centrale, le rayon est le rayon, startangle et endangle sont les radians de départ et de fin (basés sur l'axe x comme référence), dans le sens antihoraire, c'est vrai, ce qui signifie dans le sens antihoraire et dans le sens de la montre.
AVERTISSEMENT : Dans les constructions bêta de Firefox, le dernier paramètre est dans le sens des aiguilles d'une montre. La version finale prendra en charge la fonction décrite ci-dessus. Tous les scripts qui utilisent cette méthode dans son formulaire actuel devront être mis à jour une fois la version finale publiée.AVERTISSEMENT: Dans la version bêta de Firefox, le dernier paramètre est dans le sens des aiguilles d'une montre et la version finale ne l'est pas. Par conséquent, si vous passez de la bêta à la distribution, vous devez apporter des modifications correspondantes.
Remarque : Les angles dans la fonction d'arc sont mesurés en radians et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante: var radians = (math.pi / 180) * degrés.Remarque: L'angle utilisé dans la méthode d'arc est en unités de radians plutôt que de degrés. La conversion directe des degrés et des radians peut être utilisée avec cette expression: var radians = (math.pi / 180) * degrés;.
L'exemple suivant est un peu plus complexe que ceux que nous avons vus ci-dessus. J'ai dessiné 12 arcs différents avec des angles et des remplissages différents. Si j'avais écrit cet exemple, tout comme le visage souriant ci-dessus, tout d'abord, cela serait devenu une très longue liste de déclarations et deuxièmement, lors du dessin d'arcs, j'aurais besoin de connaître chaque point de départ. Pour les arcs de 90, 180 et 270 degrés, comme ceux que j'ai utilisés ici, ce ne serait pas un problème, mais pour ceux plus complexes, cela devient beaucoup trop difficile.
Cet exemple est plus compliqué que ce que vous avez vu auparavant. Il dessine 12 arcs différents avec différents angles et des états de remplissage. Si je dessine ces arcs avec la méthode ci-dessus pour dessiner des visages souriants, ce serait un grand morceau de code, et lorsque vous dessinez chaque arc, j'ai besoin de connaître la position du centre du cercle. Par exemple, dessiner des arcs de 90, 180 et 270 degrés ici est également un problème. Si les graphiques sont plus compliqués, plus il sera difficile de les implémenter.
Les deux pour les boucles sont destinés à la boucle à travers les lignes et les colonnes d'arcs. Pour chaque arc, je commence un nouveau chemin en utilisant Beginpath. En dessous, j'ai écrit tous les paramètres sous forme de variables, il est donc plus facile de lire ce qui se passe. Normalement, ce ne serait qu'une déclaration. Les coordonnées X et Y doivent être suffisamment claires. Le rayon et le startangle sont fixes. L'endangle commence à 180 degrés (première colonne) et est augmenté avec des étapes de 90 degrés pour former un cercle complet (dernière colonne). L'instruction pour le paramètre dans le sens horaire entraîne la première et la troisième rangée en cours de dessin en tant qu'arcs dans le sens horaire et la deuxième et la quatrième rangée comme arcs dans le sens antihoraire. Enfin, l'instruction IF fait les arcs supérieurs de la moitié et les arcs de moitié inférieurs.
Ici, nous utilisons deux pour des boucles pour dessiner des arcs avec plusieurs lignes et colonnes. Chaque arc crée un nouveau chemin en utilisant la méthode BeginPath. Ensuite, par souci de lecture et de compréhension faciles, j'ai écrit tous les paramètres dans des formes variables. Il est évident que X et Y sont les coordonnées centrales. Le rayon et le startangle sont fixes et Endangle commence à partir d'un demi-cercle à 180 degrés et des incréments au cercle en mode 90 degrés. Le sens antibrique dépend du nombre de lignes impaises et même. Enfin, l'instruction IF est utilisée pour juger que les deux premières lignes sont indiquées sous forme de bords, et les deux dernières lignes sont remplies de l'effet.
pour (i = 0; i <4; i ++) {pour (j = 0; j <3; j ++) {ctx.beginPath (); var x = 25 + j * 50; // x coordonnées var y = 25 + i * 50; // y coordonnée var rayon = 20; // arc rayon var startangle = 0; // point de départ sur cercle var endangle = math.pi + (math.pi * j) / 2; // point final sur cercle var dans le sens anticipé = i% 2 == 0? false: vrai; // dans le sens horaire ou dans le sens anticipé ctx.arc (x, y, rayon, startangle, endangle, dans le sens anticipé); if (i> 1) {ctx.fill (); } else {ctx.stroke (); }}}Le prochain type de chemins disponibles est les courbes Bézier, disponibles dans la variété cubique et quadratique. Ceux-ci sont généralement utilisés pour dessiner des formes organiques complexes.
Le prochain chemin à introduire est la courbe de Bezier, qui peut être sous des formes quadratiques et cubiques, et est généralement utilisée pour dessiner des formes complexes et régulières.
QuadraticCurveto (CP1X, CP1Y, X, Y) // cassé dans Firefox 1.5 (voir le travail ci-dessous) Beziercurveto (CP1X, CP1Y, CP2X, CP2Y, X, Y)La différence entre celles-ci peut être décrite à l'aide de l'image à droite. Une courbe Bézier quadratique a un début et un point final (points bleus) et un seul point de contrôle (points rouges) tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.
Voir la figure à droite pour la différence entre les deux lignes de code ci-dessus. Ils ont tous un point de départ et un point final (point bleu sur la figure), mais la courbe de Bezier quadratique n'a qu'un seul point de contrôle (rouge)) et la courbe de Bezier cubique en a deux.
Les paramètres x et y dans ces deux méthodes sont les coordonnées du point final. CP1X et CP1Y sont les coordonnées du premier point de contrôle, et CP2X et CP2Y sont les coordonnées du deuxième point de contrôle.
Les paramètres X et Y sont les coordonnées du point final, CP1X et CP1Y sont les coordonnées du premier point de contrôle, et CP2X et CP2Y sont les seconds.
L'utilisation de courbes Bézier quadratiques et cubiques peut être assez difficile, car contrairement aux logiciels de dessin vectoriel comme Adobe Illustrator, nous n'avons pas de rétroaction visuelle directe sur ce que nous faisons. Cela rend assez difficile de dessiner des formes complexes. Dans l'exemple suivant, nous dessinons des formes organiques simples, mais si vous avez le temps et, surtout, la patience, des formes beaucoup plus complexes peuvent être créées.
L'utilisation de courbes de Bezier quadratiques et cubiques est assez difficile car il n'y a pas de rétroaction visuelle instantanée comme dans le logiciel de dessin vectoriel Adobe Illustrator. Parce qu'il est plus difficile de dessiner des graphiques complexes. Mais si vous avez le temps et surtout, vous pouvez dessiner des graphiques complexes. Dessinez une figure simple et régulière ci-dessous.
Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, nous voyons une succession de courbes tirées qui entraînent enfin une forme complète.
Ces exemples sont relativement simples. Tout ce que nous dessinons sont des graphiques complets.
// courbes quadratriques examplex.beginpath (); ctx.moveto (75,25); ctx.quadraticcurveto (25,25,25,62,5); ctx.quadraticcurveto (25,100,50,100); ctx.quadraticcurveto (50, 120,30,125); ctx.quadraticcurveto (60,120,65,100); ctx.quadraticcurveto (125,100,125,62,5); ctx.quadraticcurveto (125,25,75,25); ctx.stroke ();
Il est possible de convertir n'importe quelle courbe de Bézier quadratique en courbe de Bézier cubique en calculant correctement les deux points de contrôle Bézier cubiques du point de contrôle quadratique Bézier unique, bien que l'inverse ne soit pas vrai. Une conversion exacte d'une courbe de Bézier cubique en une courbe Bézier quadratique n'est possible que si le terme cubique est nul, plus généralement, une méthode de subdivision est utilisée pour approximer un Bézier cube en utilisant plusieurs courbes Bézier quadratiques.
Grâce au calcul, deux points de contrôle de la courbe cubique correspondante peuvent être dérivés d'un seul point de contrôle de la courbe quadratique, il est donc possible de transformer le quadratique en cubique, mais sinon. Il est possible de se convertir en une courbe de Bezier quadratique uniquement si le terme cubique dans une équation cubique est nul. Généralement, plusieurs courbes quadratiques peuvent être utilisées pour approximer la simulation des courbes Cubic Bezier à travers des algorithmes de subdivision.
// Curves de Bezier Examplex.BeginPath (); ctx.moveto (75,40); ctx.beziercurveto (75,37,70,25,50,25); ctx.beziercurveto (20,25,20,62.5,20,62.5); ctx.Beziercurveto (20,80,60); CTX. , 102,75,120); ctx.beziercurveto (110,102,130,80,130,62,5); ctx.beziercurveto (130,62,5,130,25,100,25); ctx.beziercurveto (85,25,75,37,75,40);
Il y a un bug dans l'implémentation de Firefox 1.5 de quadatriccurveto (). Il ne dessine pas une courbe quadratique, car il appelle simplement la même fonction de courbe cubique BezierCurveto (), et la répétition du point de contrôle quadratique unique (x, y) coordonne deux fois. Pour cette raison, QuadraticCurveto () donnera des résultats incorrects. Si vous avez besoin d'utiliser QuadraticCurveto (), vous devez convertir votre courbe Bézier quadratique en une courbe de Bézier cubique vous-même, vous pouvez donc utiliser la méthode BezierCurveto () qui fonctionne.
Dans Firefox 1.5, l'implémentation de quadatriccurveto () est buggy. Il ne dessine pas directement une courbe quadratique, mais appelle BezierCurveto (), où les deux points de contrôle sont le point de contrôle unique de la courbe quadratique. Par conséquent, il dessine des courbes incorrectes. Si vous devez utiliser quadraticcurveto (), vous devez convertir la courbe quadratique en une puissance cubique par vous-même, vous pouvez donc utiliser la méthode beziercurveto ().
var currentx, currenty; // défini sur x, y envoyé sur lito / moveleto / beziercurveto ou quadraticcurvetofixed () function quadraticcurvetofixed (cpx, cpy, x, y) {/ * Pour les équations sous les préfixes variables suivants, les préfixes de la variable sont utilisés: QP0 est le point de départ quadratique () ou beziercurveto ()). QP1 est le point de contrôle de la courbe quadatrique (c'est le CPX, CPY que vous auriez envoyé à QuadraticCurveto ()). QP2 est le point de fin de la courbe quadratique (il s'agit des arguments x, y que vous auriez envoyé à quadraticcurveto ()). Nous allons convertir ces points pour calculer les deux points de contrôle cubiques nécessaires (les points de démarrage / fin sont les mêmes pour les courbes quadratiques et cubiques. Les équations pour les deux points de contrôle cube sont: CP0 = QP0 et CP3 = QP2 CP1 = QP0 + 2/3 * (QP1-QP0) CP2 = CP1 + 1/3 * (QP2-QP0) et y termes pour chaque point. A) Remplacez les variables qp0x et qp0y par CurrentX et Currenty (que * vous * devez stocker pour chaque MoveTo / Lineto / BezierCurveto) b) Remplacer les variables QP1X et QP1Y par CPX et CPY (que nous aurions transmis en quadraticcurveto) c) Remplacer les varias QP2X et QP2Y par X et y. ce qui nous laisse avec: * / var cp1x = currentx + 2.0 / 3.0 * (cpx - currentx); var cp1y = currenty + 2.0 / 3.0 * (cpy - currenty); var cp2x = cp1x + (x - currentx) /3.0; var cp2y = cp1y + (y - currenty) /3.0; // et maintenant appelez la courbe de Bezier cubique pour fonctionner Beziercurveto (CP1X, CP1Y, CP2X, CP2Y, X, Y); currentx = x; currenty = y;}Outre les trois méthodes que nous avons vues au-dessus desquelles dessiner des formes rectangulaires directement sur la toile, nous avons également une méthode rect qui ajoute un chemin rectangulaire à la liste des chemins.
En plus des trois méthodes mentionnées ci-dessus qui peuvent dessiner directement des rectangles, nous avons également une méthode Rect utilisée pour dessiner des chemins de rectangle.
rect (x, y, largeur, hauteur)Cette méthode prend quatre arguments. Les paramètres X et Y définissent la coordonnée du coin supérieur gauche du nouveau chemin rectangulaire. La largeur et la hauteur définissent la largeur et la hauteur du rectangle.
Il accepte quatre paramètres, X et Y sont ses coordonnées supérieures gauche, et la largeur et la hauteur sont sa largeur et sa hauteur.
Lorsque cette méthode est exécutée, la méthode MoveTo est automatiquement appelée avec les paramètres (0,0) (c'est-à-dire qu'il réinitialise le point de départ à son emplacement par défaut).
Lorsqu'elle est appelée, la méthode MoveTo sera appelée automatiquement, de sorte que la coordonnée de démarrage est restaurée à l'origine.
Dans tous les exemples de cette page, je n'ai utilisé qu'un seul type de fonction de chemin par forme. Cependant, il n'y a absolument aucune limitation à la quantité ou au type de chemins que vous pouvez utiliser pour créer une forme. Donc, dans ce dernier exemple, j'ai essayé de combiner toutes les fonctions de chemin pour créer un ensemble de personnages de jeu très célèbres.
Les exemples utilisés ci-dessus n'utilisent qu'un seul type de chemin, bien sûr, la toile ne limitera pas le nombre de types de chemin utilisés. Alors, regardons un hodgepodge de chemin.
Je ne vais pas exécuter ce script complet, mais les choses les plus importantes à noter sont la fonction arrondi et l'utilisation de la propriété FillStyle. Il peut être très utile et gagner du temps pour définir vos propres fonctions pour dessiner des formes plus complexes. Dans ce script, cela m'aurait pris deux fois plus de lignes de code que maintenant.
Nous examinerons la propriété Fillstyle plus en profondeur plus tard dans ce tutoriel. Ici, je l'utilise pour changer la couleur de remplissage du noir par défaut, en blanc et vice-versa.
Dans l'ensemble, la chose la plus notable est l'utilisation de la fonction RoundDect et les paramètres de la propriété FillStyle. Les fonctions personnalisées sont très utiles pour résumer le dessin de graphiques complexes. L'utilisation d'une fonction personnalisée dans cet exemple enregistre environ la moitié du code.
Dans les exemples suivants, nous explorerons une utilisation approfondie des attributs de remplissage. Voici pour l'utiliser pour changer la couleur de remplissage, du noir par défaut, en blanc, puis de retour en noir.
Afficher l'exemple
function draw () {var ctx = document.getElementById ('canvas'). getContext ('2d'); RoundDect (CTX, 12,12,150,150,15); RoundDect (CTX, 19,19,150,150,9); RoundDect (CTX, 53,53,49,33,10); RoundDect (CTX, 53 119,49,16,6); RoundDect (CTX, 135,53,49,33,10); RoundDect (CTX, 135 119,25,49,10); ctx.beginPath (); ctx.arc (37,37,13, math.pi / 7, -math.pi / 7, true); ctx.lineto (31,37); ctx.fill (); pour (i = 0; i <8; i ++) {ctx.fillrect (51 + i * 16,35,4,4); } pour (i = 0; i <6; i ++) {ctx.fillrect (115,51 + i * 16,4,4); } pour (i = 0; i <8; i ++) {ctx.fillrect (51 + i * 16,99,4,4); } ctx.beginpath (); ctx.moveto (83 116); ctx.lineto (83,102); ctx.beziercurveto (83,94,89,88,97,88); ctx.beziercurveto (105,88,111,94,111,102); CTX.LeneTeTo (111 116); ctx.lineTeTo (106.333,111.333); ctx.lineTeTo (101.666,116); CTX.LeneTeTo (97,111,333); ctx.lineTeTo (92.333,116); ctx.lineTeTo (87.666,111.333); CTX.LeneTeTo (83 116); ctx.fill (); ctx.filstyle = blanc; ctx.beginPath (); ctx.moveto (91,96); ctx.beziercurveto (88,96,87,99,87,101); ctx.beziercurveto (87,103,88,106,91,106); ctx.beziercurveto (94,106,95,103,95,101); ctx.beziercurveto (95,99,94,96,91,96); ctx.moveto (103,96); ctx.beziercurveto (100,96,99,99,99,101); ctx.beziercurveto (99 103,100,106,103,106); ctx.beziercurveto (106 106 107,103,107,101); ctx.beziercurveto (107,99,106,96,103,96); ctx.fill (); ctx.fillStyle = noir; ctx.beginPath (); ctx.arc (101,102,2,0, math.pi * 2, true); ctx.fill (); ctx.beginPath (); ctx.arc (89,102,2,0, math.pi * 2, true); ctx.fill (); ctx.fill (); ctx.arc (89,102,2,0, math.pi * 2, true); ctx.fill (); ctx.fill (); } fonction Roundederect (ctx, x, y, largeur, hauteur, rayon) {ctx.beginpath (); ctx.moveto (x, y + rayon); ctx.lineto (x, y + hauteur-radius); ctx.quadraticcurveto (x, y + hauteur, x + rayon, y + hauteur); ctx.lineto (x + largeur-radius, y + hauteur); ctx.quadraticcurveto (x + largeur, y + hauteur, x + largeur, y + hauteur-radius); ctx.lineto (x + largeur, radius y +); ctx.quadraticcurveto (x + largeur, y, x + largeur-radius, y); ctx.lineto (x + rayon, y); ctx.quadraticcurveto (x, y, x, y + rayon); ctx.stroke ();}