Share
Cet article est le premier d'une série qui vous familiarisera avec HTML5 canvas, la fonctionnalité de dessin sans plug-in intégrée aux navigateurs modernes. Dans cet article d'introduction, je vais vous montrer comment accéder à l'élément de la toile, dessiner des formes, changer les couleurs et effacer des éléments. C'est un tour d'horizon complet des bases de cette nouvelle technologie Web étonnante.
La série sera un tour passionnant et j'espère que vous l'apprécierez. Je suppose que vous êtes déjà à l'aise avec JavaScript, mais que vous avez peu ou pas d'expérience avec la toile. Même si vous êtes nouveau sur JavaScript, ne vous inquiétez pas, vous apprendrez toujours quelque chose grâce à ces articles..
Utiliser l'élément canvas est très facile.
Quand vous pensez à la toile, vous pensez probablement au nouveau HTML5 Toile élément. Techniquement, ce n’est que la moitié de l’histoire, mais oublions cela pour le moment. le Toile L'élément est la face publique de cette nouvelle fonctionnalité du navigateur..
En utilisant le Toile l'élément est très facile; c'est une simple balise HTML, avec une largeur et une hauteur définies.
Cela ne fait pas beaucoup encore. En fait, tout ce qu’il fait est d’insérer un canevas transparent sur votre page. Le contenu à l'intérieur de la Toile L'élément est un contenu de secours, qui ne s'affichera que si un navigateur ne prend pas en charge le canevas..
Le support du navigateur pour la toile est assez incroyable.
Il est important de souligner que la prise en charge de la toile par le navigateur est assez étonnante. Chaque navigateur moderne le supporte, y compris le dernier Internet Explorer.
Fait intéressant, vous pouvez utiliser certaines fonctionnalités de la toile dans Internet Explorer version 8 et ultérieure, via le plugin ExplorerCanvas..
Une leçon clé que j’ai apprise avec canvas est que vous devez définir explicitement le largeur et la taille attributs de la Toile élément lors de la définition de ses dimensions. Si vous utilisez CSS pour définir la largeur et la hauteur, le canevas sera redimensionné à la taille voulue. Il y a une raison logique derrière cela; c'est à voir avec Toile L'élément est un conteneur pour quelque chose appelé le contexte de rendu 2D. Cependant, il est important de savoir que l'utilisation de CSS pour définir les dimensions de la toile aura un effet étrange..
J'ai mentionné dans la dernière section que le Toile L'élément n'est que la moitié de l'histoire. L'autre moitié est le contexte de rendu 2d; la partie de la toile qui vous permet de faire des trucs cool que vous pouvez réellement voir.
Permettez-moi de préciser une chose: lorsque vous utilisez canvas, vous ne dessinez pas sur le Toile élément lui-même. Au lieu de cela, vous vous appuyez sur le contexte de rendu 2D, auquel vous accédez à travers la Toile élément via l'API JavaScript. Cela n'a pas vraiment d'importance dans le grand schéma des choses, mais il est utile de savoir.
Si vous avez déjà utilisé un langage de programmation graphique 2D (ActionScript, Traitement, etc.), vous saurez tout sur les systèmes de coordonnées basés sur écran. Le contexte de rendu 2D dans le canevas n’est pas différent; il utilise un système de coordonnées cartésien standard, avec le point d'origine (0, 0) en haut à gauche. Déplacer vers la droite augmentera la valeur de la X tout en descendant augmentera la valeur de l’axe. y axe. C'est assez simple.
Une unité dans le système de coordonnées est égale à un pixel sur l'écran (dans la majorité des cas).
Pour utiliser réellement le contexte de rendu 2d, vous devez utiliser l'API JavaScript. La partie de l’API que vous souhaitez utiliser est la getContext méthode, comme si:
Toile à partir de zéro
Remarque: vous utilisez jQuery ici, mais uniquement pour vérifier que le DOM est prêt. N'hésitez pas à utiliser votre bibliothèque JavaScript préférée à la place, ou à placer le code au bas du document..
À la suite de l'appel getContext, la ctx La variable contiendra maintenant une référence au contexte de rendu 2D. Cela signifie que vous avez maintenant tout mis en place pour commencer à dessiner sur la toile. La partie amusante!
Maintenant que vous avez accès au contexte de rendu 2d, vous pouvez commencer à appeler les méthodes de dessin de l'API. L'un des plus fondamentaux est fillRect, qui dessine un rectangle qui est rempli dans une couleur particulière (noir par défaut).
Ajoutez le code suivant sous le ctx variable de plus tôt:
ctx.fillRect (50, 50, 100, 100);
Cela dessine un carré noir légèrement éloigné des bords gauche et supérieur de la toile, comme suit:
Vous venez de dessiner votre première forme à l'aide de la toile HTML5. Se sent bien, juste?
Remarque: Vous remarquerez que vous utilisez la méthode rectangle de l'API JavaScript pour dessiner des carrés. C’est parce qu’il n’existe aucune méthode dans la zone de travail pour dessiner des carrés directement, simple parce que les carrés sont rectangles (ils ont quatre côtés avec des angles droits entre eux).
Il existe quatre arguments dans un appel à fillRect:
Le pseudocode est écrit, fillRect ressemblerait à ceci:
ctx.fillRect (x, y, largeur, hauteur);
La bonne chose est que vous n'êtes pas limité à de simples rectangles remplis. Nan. Vous pouvez également dessiner des rectangles en traits; c'est-à-dire des rectangles entourés d'un contour. Pour cela, vous pouvez utiliser le strokeRect méthode de l'API JavaScript, comme suit:
ctx.strokeRect (50, 50, 100, 100);
Il utilise exactement les mêmes arguments que fillRect, et le résultat sera un beau contour d'un carré:
Simple. Élégant. Facile. Cela résume vraiment la toile. Toutes les méthodes sont simples lorsqu'elles sont examinées individuellement, mais lorsqu'elles sont utilisées ensemble, elles vous permettent de dessiner des choses assez étonnantes..
Outre les rectangles (les seules formes pouvant être dessinées avec une seule méthode API), vous avez des chemins. Les chemins vous permettent de tracer des lignes, droites ou incurvées, qui peuvent être combinées pour créer des formes assez complexes.
Dessiner un chemin simple nécessite l’utilisation de quelques nouvelles méthodes API:
Accentsconagua
beginPath commence un nouveau chemin.déménager à déplace le point à partir duquel le chemin est tracé.lineto trace un chemin droit jusqu'à ce point à partir du point défini dans moveTo ou du dernier appel à lineTo.closePath ferme le chemin en reliant le dernier point au point de départ.remplir remplit le chemin avec une couleur.accident vasculaire cérébral trace le chemin.Essayez le code suivant:
ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.fill ();
Ce qui va tracer un chemin en triangle et le remplir:
Vous pouvez utiliser le même concept pour dessiner toute autre forme souhaitée. Le deuxième article de cette série couvrira des chemins plus avancés dans la zone de dessin, comme des arcs (pour créer des cercles) et des chemins de Bézier (pour créer des lignes courbes sympas)..
La chose importante à retenir maintenant est que les chemins sont pratiquement le seul moyen de dessiner quelque chose de plus compliqué qu'un rectangle.
Jusqu'à présent, tout ce que vous avez dessiné a été rempli ou effacé en noir. C'est excitant! Heureusement, quelques propriétés de l'API JavaScript vous permettent de modifier la couleur des formes que vous dessinez. Ces propriétés sont fillStyle et strokeStyle.
Ils s’expliquent assez bien, alors intervenons et changeons la couleur de remplissage d’un rectangle:
ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (50, 50, 100, 100);
Cela vous donnera un joli carré rouge, comme ceci:
Ou, vous pouvez changer la couleur de contour d'un rectangle:
ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Ce qui vous donnera un carré avec un contour rouge:
La beauté de fillStyle et strokeStyle est-ce qu'ils acceptent tous les deux les valeurs de couleur CSS normales. Cela signifie que vous pouvez utiliser RGB, RGBA, HSA, des mots de couleur (par exemple, "rouge") et des valeurs hexadécimales..
Il est intéressant de souligner que le fait de changer la couleur de la zone de travail n’affectera en rien les éléments déjà dessinés. Par exemple, si vous dessinez un rectangle noir, modifiez le style de remplissage en rouge, puis dessinez un autre rectangle; le premier rectangle sera toujours noir.
En plus de changer de couleur, vous pouvez également modifier la largeur d'un contour tracé. Pour ce faire, vous pouvez utiliser le largeur de ligne propriété de l'API JavaScript.
En utilisant le code de l'exemple précédent, vous pouvez modifier la largeur du contour:
ctx.lineWidth = 20; ctx.strokeStyle = "rgb (255, 0, 0)"; ctx.strokeRect (50, 50, 100, 100);
Ce qui vous donnera un beau trait rouge:
Le même concept fonctionne aussi pour les chemins. Par exemple, vous pouvez modifier le triangle précédent pour obtenir un contour plus épais:
ctx.lineWidth = 20; ctx.beginPath (); ctx.moveTo (50, 50); ctx.lineTo (50, 250); ctx.lineTo (250, 250); ctx.closePath (); ctx.stroke ();
Ce qui vous donnera un triangle incroyablement excitant:
Il existe également d'autres fonctionnalités de l'API JavaScript qui vous permettent de modifier la façon dont les lignes sont tracées. Par exemple, lineCap change l'apparence de la fin d'une ligne, et lineJoin change l'apparence des coins d'une ligne. Vous devriez absolument vérifier ces caractéristiques (et plus) dans les spécifications de la toile..
La dernière chose que je veux vous apprendre, c'est comment effacer la toile. Vous avez appris à dessiner des formes, mais pas à vous en débarrasser, ce qui peut s'avérer fort utile.
Heureusement, il est facile d'effacer la toile. vous avez juste besoin d'une méthode de l'API JavaScript. Cette méthode est clearRect, et son travail consiste à rendre chaque pixel du rectangle transparent.
Dans cet article, le canevas mesure 500 pixels de large et 500 pixels de haut. Vous pouvez donc facilement effacer le canevas entier en appelant clearRect ainsi:
ctx.fillRect (50, 50, 100, 100); ctx.clearRect (0, 0, 500, 500);
Il ne sert à rien de vous montrer une capture d'écran, parce que si cela fonctionne, vous ne devriez absolument rien voir. Le rectangle rempli est en train d'être dessiné, mais il est immédiatement effacé par la suite, vous ne pouvez donc pas le voir..
Remarque: Les arguments dans clearRect sont les mêmes que fillRect; X, y, largeur et la taille.
Si vous n'êtes pas sûr de la largeur et de la hauteur de la toile, vous pouvez également l'effacer de la manière suivante:
ctx.clearRect (0, 0, canvas.width, canvas.height);
Cela utilise le largeur et la taille propriétés du Toile élément lui-même, ce qui est incroyablement utile et une bien meilleure façon de faire les choses.
Vous n'êtes pas obligé d'effacer toute la toile si vous ne le souhaitez pas. Vous pouvez assez facilement effacer une petite partie à la place. Par exemple, imaginez que vous ayez dessiné un carré noir à côté d'un carré rouge:
ctx.fillRect (50, 50, 100, 100); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (200, 50, 100, 100);
Ce qui ressemblerait normalement à ceci:
Vous pouvez effacer le carré noir et laisser le carré rouge intact en ajoutant un appel à clearRect sous:
ctx.clearRect (50, 50, 100, 100);
Notez que cet appel à clearRect définit une position et une taille identiques à celles du carré noir. Cela signifie fondamentalement que cela ne fera que changer les pixels de la zone du carré en noir transparent (en les effaçant):
Assez chouette, n'est-ce pas? L'effacement de la toile n'est pas quelque chose que vous utiliserez beaucoup avec les dessins statiques, mais c'est quelque chose que vous utiliserez beaucoup lorsque vous apprendrez à animer plus tard dans cette série..
Canvas est facile à utiliser, rapide à apprendre et extrêmement puissant lorsque vous le repoussez..
Comme vous pouvez le constater, la toile est donc un nouvel élément particulièrement puissant du navigateur. Il vous permet de créer des graphiques, en utilisant du code et sans utiliser un seul plugin. Il est facile à utiliser, rapide à apprendre et extrêmement puissant lorsque vous le repoussez..
Dans le prochain article, vous allez examiner certaines des fonctionnalités les plus avancées de la toile, telles que les cercles de dessin, les tracés courbes et quelque chose appelé l'état de dessin. Et si cela ne suffisait pas, plus tard dans la série, vous allez voir comment transformer des dessins (comme la rotation et l’échelle), comment manipuler des images et pour finir en regardant comment animer. Ça va être très excitant, croyez-moi.
Pour l’instant, j’espère que je vous ai donné suffisamment d’aide pour stimuler votre appétit pour la toile et pour en apprendre davantage à ce sujet. Canvas est une technologie fantastique qui mérite vraiment d'être comprise, même si vous ne prévoyez pas de l'utiliser tout de suite..
