Share
Dans le précédent article de cette série, vous avez découvert l'élément canvas et les bases pour dessiner dessus. Dans cet article, je vais vous présenter certaines des fonctionnalités de dessin les plus avancées..
Nous allons utiliser le même modèle HTML de l'article précédent; alors ouvrez votre éditeur favori et collez le code suivant:
Toile à partir de zéro
Ce n’est rien de plus qu’une page HTML de base avec un Toile élément et du code JavaScript exécuté après le chargement du DOM. Rien de fou.
Dans le dernier article, je vous ai montré comment dessiner des formes et des chemins de base; Dans cette section, je vais vous montrer comment faire avancer les choses et dessiner des cercles. Ce n'est pas aussi facile qu'on pourrait le penser, mais ce n'est pas difficile du tout.
Il n'y a pas de méthode dans la zone de dessin qui vous permet de dessiner un cercle avec une seule ligne de code fillRect fonctionne pour les rectangles. Au lieu de cela, vous devez dessiner des cercles avec un chemin en utilisant le arc méthode; un cercle est simplement un arc de 360 degrés. La raison en est que les cercles sont en fait des formes très complexes, et le arc Cette méthode permet toutes sortes de contrôles sur la manière dont vous les dessinez. Par exemple, vous voudrez peut-être ne dessiner qu'un demi-cercle. le arc méthode vous permet de le faire. Vous pouvez même combiner le arc méthode avec des trajectoires droites standard pour dessiner des tranches de pizza et des quarts de cercle.
Je vais expliquer comment le arc Cette méthode fonctionne brièvement, mais pour l’instant, dessinons un cercle en ajoutant le code suivant sous le ctx variable:
cxt.beginPath (); ctx.arc (100, 100, 50, 0, Math.PI * 2, false); ctx.closePath (); ctx.fill ();
Cela va dessiner un cercle légèrement éloigné du coin supérieur gauche de la toile:
Ça a l'air simple, non? Et ça l'est, mais regardons de plus près ce qui se passe.
le arc La méthode a un total de six arguments:
Écrit en pseudocode, arc ressemblerait à ceci:
arc (x, y, rayon, angle de départ, angle de fin, sens inverse des aiguilles d'une montre);
Les trois premiers arguments sont explicites, de même que le dernier, mais qu'en est-il des angles de début et de fin? Laisse-moi expliquer.
Comme je l'ai mentionné précédemment, les cercles ne sont que des arcs de 360 degrés. Dans la zone de dessin, un arc est défini comme une ligne courbe commençant à une distance d'un point d'origine correspondant à la distance du rayon. La ligne courbe commence à l'angle défini en tant qu'argument d'angle de départ (le quatrième) et continue autour de la circonférence d'un cercle imaginaire jusqu'à ce qu'il atteigne l'angle défini en tant qu'argument d'angle de fin (le cinquième). Cela semble simple, juste?
Peut-être qu'une illustration aidera à expliquer la situation:
Cela peut paraître fou, mais cela fait beaucoup de sens une fois que vous êtes capable de vous y retrouver.
À ce stade, il est probablement utile de mentionner que les angles de la toile sont exprimés en radians et non en degrés. Cela signifie que les angles vont de 0 à pi multiplié par deux. Les angles dans la toile commencent également par le côté droit, comme l'illustre l'illustration suivante:
Si vous n'aimez vraiment pas les radians, vous pouvez facilement convertir des degrés en radians avec la formule JavaScript suivante:
degrés var = 270; var radians = degrés * (Math.PI / 180);
Cette formule est extrêmement simple et elle est extrêmement utile si vous souhaitez négocier en degrés.
Les arcs sont amusants et tout, mais ils sont assez limitatifs pour le type de courbes que l’on peut créer avec canvas. Pour quelque chose de plus complexe, vous voudrez commencer à regarder les méthodes de courbe de B? Zier quadraticCurveTo, et bezierCurveTo. Ces méthodes vous permettent de créer des tracés courbes ayant un rayon non central, ainsi que de créer des tracés comportant plusieurs courbes..
Les trajectoires B? Zier utilisent des points de contrôle pour définir comment et où dessiner les courbes. Par exemple, quadraticCurveTo a un point de contrôle, alors que bezierCurveTo a deux. Consultez l'illustration suivante pour voir comment les points de contrôle affectent la manière dont une courbe est dessinée:
Si vous avez déjà utilisé une application de dessin vectoriel telle que Adobe Illustrator, vous êtes peut-être déjà à l'aise avec ce type de courbes..
Faisons un saut et créons un chemin quadratique de B? Zier. Remplacez le code d'arc par ce qui suit:
ctx.lineWidth = 8; ctx.beginPath (); ctx.moveTo (50, 150); ctx.quadraticCurveTo (250, 50, 450, 150); ctx.stroke ();
Cela va tracer un chemin incurvé qui ressemble à celui de la gauche de l'illustration ci-dessus:
le quadraticCurveTo La méthode prend quatre arguments:
Écrit en pseudocode, quadraticCurveTo ressemblerait à ceci:
quadraticCurveTo (cpx, cpy, x, y);
La position de départ de la courbe est celle où se trouve actuellement le chemin. Par exemple, dans le code ci-dessus, vous avez déplacé le début du chemin en appelant le déménager à méthode.
Passons d'un niveau à un autre pour créer un chemin B? Zier cubique. Remplacez le code précédent par le suivant:
ctx.lineWidth = 8; ctx.beginPath (); ctx.moveTo (50, 150); ctx.bezierCurveTo (150, 50, 350, 250, 450, 150); ctx.stroke ();
Cela va tracer un chemin incurvé qui ressemble à celui de la droite de l'illustration ci-dessus:
le bezierCurveTo La méthode prend six arguments:
Le pseudocode est écrit, bezierCurveTo ressemblerait à ceci:
bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y);
Sur leurs propres chemins de B? Zier ne sont pas super étonnants, mais lorsqu'ils sont combinés avec des chemins normaux, ou utilisés plusieurs fois, les résultats peuvent être assez profonds. Ils vous permettent de créer toutes sortes de formes compliquées et folles dans une toile.!
Vous voudrez peut-être consulter le plug-in Ai-> Canvas pour Adobe Illustrator, qui vous permet d'exporter votre dessin vectoriel fantaisie sous forme de code canevas. C'est très chouette, et vous fera gagner beaucoup de temps!
Dans l'article précédent de cette série, je décrivais comment changer le style de remplissage et de trait du canevas, ainsi que la largeur des lignes. Un des problèmes à prendre en compte lors de la modification de ces propriétés est que vous devrez modifier manuellement les couleurs et la largeur de trait si vous souhaitez que la couleur ou la largeur que vous aviez à l'origine. Heureusement, comme toujours, il existe un meilleur moyen de le faire. ça s'appelle l'état de dessin.
L'état de dessin dans la zone de dessin est essentiellement une pile sur laquelle vous pouvez enregistrer les styles actuels, puis les restaurer à une date ultérieure..
C'est un concept sournoisement simple, mais qui vous permet de faire tellement de choses quand vous les comprenez parfaitement. En fait, l'état de dessin contient une quantité considérable d'informations visuelles sur le canevas, telles que la matrice de transformation, la région de découpage et les propriétés suivantes; globalAlpha, globalCompositeOperation, strokeStyle, fillStyle, largeur de ligne, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, Police de caractère, textAlign, et textBaseline. La plupart d'entre elles seront nouvelles pour vous, alors ne vous inquiétez pas. Vous en apprendrez plus sur les transformations et autres choses amusantes comme les ombres dans le prochain article.
Utiliser l'état de dessin est extrêmement simple, mais sa compréhension peut prendre un peu de temps. Remplacez le code de la dernière section par le suivant:
ctx.fillStyle = "rgb (0, 0, 255)"; ctx.save (); ctx.fillRect (50, 50, 100, 100);
C’est vraiment tout ce dont vous avez besoin pour enregistrer l’état du dessin: un seul appel à la enregistrer méthode. je t'ai dit que c'etait simple!
Ce qui se passe ici, c’est que vous modifiez le style de remplissage de la zone de travail en bleu, puis enregistrez l’état de dessin, ce qui place l’état actuel dans la pile dont je parlais tout à l’heure. Par défaut, la pile d'états de dessin est vide.
Il est important de se rappeler que la pile fonctionne exactement comme une pile de papier sur votre bureau. le premier élément de la pile se trouve en bas, l'élément le plus récent en haut. Si vous souhaitez revenir au premier élément, vous devez d'abord enlever tous les éléments qui s'y trouvent. C'est ce qu'on appelle le système du premier entré, dernier sorti ou dernier entré, premier sorti si vous voulez le regarder dans l'autre sens..
Enregistrer l'état de dessin est génial et tout, mais le réutiliser est en réalité un peu plus utile. Pour ce faire, vous allez utiliser le restaurer méthode.
Ajoutez le code suivant au code ci-dessus:
ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (200, 50, 100, 100);
Cela va dessiner un autre rectangle sur la toile, mais cette fois dans une couleur différente (rouge):
Jusqu'ici, tous les éléments sont assez classiques, mais que se passe-t-il si vous souhaitez revenir à la couleur bleue et dessiner un autre rectangle? Eh bien, vous pouvez définir le style de remplissage manuellement en bleu, mais ce serait ennuyeux. Essayons d'utiliser la méthode de restauration et de voir ce qui se passe.
Ajoutez le code suivant:
ctx.restore () ctx.fillRect (350, 50, 100, 100);
Cela dessine un autre rectangle, mais cette fois-ci avec le style de remplissage d'origine:
Comment était-ce facile? L'appel à restaurer a retiré et supprimé le dernier état de dessin ajouté à la pile, puis l'a appliqué à la zone de dessin, vous permettant ainsi de gagner beaucoup de temps. Ok, eh bien, dans cet exemple, cela ne vous aurait peut-être pas fait gagner énormément de temps, mais vous auriez dû modifier toutes sortes de propriétés et effectuer des transformations sur le canevas..
Vous savez donc comment utiliser l'état de dessin pour une seule occurrence, mais que se passe-t-il si vous enregistrez plusieurs états de dessin? Vous vous souviendrez peut-être que pour les yeux pointus, j’ai qualifié la pile de pile de papier; dernier entré, premier sorti. Voyons comment cela fonctionne dans le code.
Mettez à jour le code précédent pour enregistrer l'état du dessin après avoir défini le style de remplissage sur rouge:
ctx.fillStyle = "rgb (0, 0, 255)"; ctx.save (); ctx.fillRect (50, 50, 100, 100); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.save (); ctx.fillRect (200, 50, 100, 100); ctx.restore () ctx.fillRect (350, 50, 100, 100);
Même s'il s'agit pratiquement du même code qu'auparavant, tout aura changé car le dernier état de dessin ajouté à la pile contient le style de remplissage rouge:
Pour restaurer le premier état (le style de remplissage bleu), vous devez appeler restaurer pour une seconde fois, ajoutez donc le code suivant:
ctx.restore (); ctx.fillRect (50, 200, 100, 100);
Cela va tirer et supprimer le premier état de la pile et l'appliquer à la toile, vous donnant un style de remplissage bleu:
En utilisant plusieurs états de dessin comme celui-ci, vous pouvez gagner beaucoup de temps. C'est assez chouette!
J'espère que je ne suis pas allé trop vite à travers tout ça. Certains des concepts que nous avons abordés sont assez avancés et je vous encourage à relire l'article et à jouer avec le code pour mieux comprendre ce qui se passe..
Dans le prochain article, vous apprendrez à effectuer des transformations sur le canevas, ainsi qu'à utiliser des ombres et des dégradés. Temps passionnants!
Accentsconagua