[email protected]
06 19 61 29 25

Créer des formes avec JavaScript sur Canva

Les formes sont des éléments graphiques essentiels qui peuvent être utilisés pour renforcer l'identité visuelle de votre marque, guider le regard de l'utilisateur ou établir des liens logiques entre différentes idées. Canva offre une grande flexibilité pour personnaliser ces formes, notamment en y ajoutant du texte, en ajustant leurs bordures, leurs couleurs, leurs dimensions et même l'arrondi de leurs coins.

Les formes peuvent être combinées pour former des arrière-plans complexes ou des graphiques de support. Elles servent également de base pour créer des légendes ou des étiquettes lorsqu'elles sont associées à du texte. De plus, en les reliant avec des lignes, il est possible de construire des organigrammes.

Illustration montrant différentes utilisations de formes dans Canva : arrière-plans, légendes avec texte, organigrammes.

Explorer la bibliothèque de formes dans Canva

L'onglet Éléments dans Canva regorge d'une vaste sélection de formes prédéfinies. Cette collection comprend une variété de catégories, telles que :

  • Lignes
  • Formes de base
  • Polygones
  • Étoiles
  • Flèches
  • Formes d'organigramme
  • Bulles de parole et nuages
  • Cœurs, bannières et larmes
  • Rouages, étoiles carrées et formes organiques/abstraites

Ces formes sont accessibles à tous les utilisateurs, qu'ils disposent d'un compte Free, Canva Pro, Canva for Teams, Canva for Enterprise, Canva for Education ou Canva for Nonprofits.

Ajouter des formes à votre design

Pour intégrer une forme dans votre projet Canva, suivez ces étapes simples :

  1. Dans le panneau latéral de l'éditeur, sélectionnez l'onglet Éléments.
  2. Sous la section Formes, cliquez sur la forme désirée pour l'ajouter directement à votre design.
  3. Si vous souhaitez explorer davantage d'options, cliquez sur Afficher tout pour découvrir l'ensemble de la bibliothèque de formes disponibles.
Capture d'écran du panneau

Création de formes personnalisées avec l'IA

Si la forme exacte que vous recherchez n'est pas disponible, Canva propose une fonctionnalité innovante de génération de formes par IA.

  1. Dans le panneau Formes, sélectionnez l'option Générer des formes.
  2. Décrivez la forme souhaitée à l'aide d'une brève invite textuelle.
  3. Cliquez sur Générer des formes, puis choisissez le résultat qui correspond le mieux à vos besoins pour l'ajouter à votre design.

Importation de formes personnalisées

Une autre méthode consiste à créer vos formes dans un logiciel de conception externe, tel qu'Affinity, et à les importer ensuite sur Canva sous forme de fichiers SVG (Scalable Vector Graphics). Les fichiers SVG sont particulièrement utiles car ils conservent leur qualité quelle que soit la taille.

Modifier et affiner les formes

Une fois qu'une forme est ajoutée à votre design, vous disposez de nombreux outils pour la personnaliser :

  • Modification des bordures : Sélectionnez la forme, puis cliquez sur l'icône de style de trait dans la barre d'outils. Vous pourrez ainsi choisir un style de bordure et ajuster son épaisseur.
  • Redimensionnement : Utilisez les poignées circulaires blanches dans les coins pour redimensionner la forme de manière proportionnelle. Les poignées en forme de pilule sur les côtés permettent un redimensionnement asymétrique.
  • Changement de couleur : Cliquez sur la case de couleur dans la barre d'outils pour choisir une couleur unie ou un dégradé.
  • Rotation : Cliquez sur le bas de la forme et faites glisser vers la gauche ou la droite pour la faire pivoter.
  • Ajout de texte : Double-cliquez sur la forme pour y insérer du texte. La marge intérieure peut être ajustée via la barre d'outils pour contrôler l'espace entre le texte et les bords de la forme.
  • Ajustements spécifiques pour polygones et étoiles : Pour les polygones, cliquez sur les coins pour ajouter des côtés et ajuster l'arrondi. Pour les étoiles, cliquez sur les coins pour ajouter des points et modifier le rayon intérieur.
  • Modification de la forme elle-même : Sélectionnez la forme, cliquez sur Modifier dans la barre d'outils, puis choisissez une nouvelle forme de base.
Infographie montrant les différentes options de modification d'une forme dans Canva : bordures, couleurs, rotation, texte.

Limitations des formes dans Canva

Il est important de connaître certaines limitations lors de l'utilisation des formes dans Canva :

  • Les formes ne peuvent pas être inversées horizontalement ou verticalement.
  • Il n'est pas possible d'ajouter des images directement dans les formes ; pour cela, utilisez plutôt la fonctionnalité des cadres.
  • Les formes importées au format SVG (fichiers téléchargés) ne peuvent pas être redimensionnées ou recolorées, ni leurs coins, traits ou la forme elle-même modifiés.

Utilisation du Canvas HTML5 et JavaScript pour la création de formes

Au-delà des fonctionnalités intégrées de Canva, le développement web offre des possibilités avancées pour la création de formes graphiques grâce à l'élément HTML <canvas> et à JavaScript. Le terme "canvas" évoque un support artistique, et il est effectivement utilisé pour le dessin et la création graphique dans le navigateur.

Les bases du dessin avec le Canvas

L'élément <canvas> permet de créer une zone rectangulaire sur une page web, qui peut ensuite être remplie de graphiques, d'animations ou d'images via JavaScript. Pour interagir avec cette zone, un contexte 2D est créé.

La création d'une zone de dessin se fait en utilisant la balise HTML :

<canvas id="monCanvas" width="500" height="250"></canvas>

Ce code crée une surface de 500 pixels de large et 250 pixels de haut. Pour pouvoir dessiner dessus, il faut récupérer cet élément par son ID et obtenir son contexte 2D :

const canvas = document.getElementById('monCanvas');const ctx = canvas.getContext('2d');
Schéma expliquant la structure : HTML <canvas> comme conteneur, JavaScript pour le dessin.

Méthodes de dessin fondamentales

JavaScript fournit une API riche pour dessiner sur le canvas. Voici quelques méthodes essentielles :

  • Tracer des lignes : La méthode lineTo(x, y) trace une ligne depuis la position actuelle du curseur jusqu'aux coordonnées spécifiées (x, y). La méthode stroke() rend visible le tracé défini.
  • Remplissage de formes : La propriété fillStyle définit la couleur ou le motif de remplissage. La méthode fill() remplit un chemin fermé avec ce style. Pour remplir directement un rectangle, on utilise fillRect(x, y, width, height).
  • Rectangles : La méthode rect(x, y, width, height) dessine un rectangle dont le coin supérieur gauche est aux coordonnées (x, y).
  • Courbes de Bézier : La méthode bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) permet de créer des courbes de Bézier cubiques complexes.

Par exemple, pour dessiner un rectangle bleu de 200x150 pixels à 10 pixels du bord gauche et 50 pixels du bord supérieur :

ctx.fillStyle = 'teal';ctx.fillRect(10, 50, 200, 150);

Gradients et motifs

Le Canvas permet de créer des effets visuels avancés :

  • Gradients linéaires : La méthode createLinearGradient(x1, y1, x2, y2) crée un objet dégradé défini par un vecteur entre deux points. Des couleurs peuvent être ajoutées à ce dégradé à l'aide de addColorStop(numero, codeCouleur).
  • Motifs avec images : Il est possible de remplir une forme avec une image répétée en utilisant createPattern(). Il est crucial d'attendre le chargement complet de l'image avant de créer le motif.
Exemple visuel de dégradé linéaire et de remplissage par motif d'image sur un canvas.

Manipulation de texte

Le Canvas permet également d'ajouter et de manipuler du texte :

  • measureText() retourne la largeur en pixels du texte.
  • textBaseline contrôle la ligne d'appui du texte (par défaut, 'alphabetic').

La rotation de texte ou d'autres éléments graphiques est possible, bien que le code nécessaire puisse devenir complexe. Par défaut, la rotation s'effectue autour du point (0, 0) du canvas.

Transformations et gestion d'état

L'API Canvas offre des méthodes pour effectuer des transformations sur les objets dessinés, telles que la rotation, le déplacement, le zoom, et pour composer plusieurs images. Il est également possible de gérer l'état graphique (transformations, styles) pour éviter que des modifications appliquées à un élément n'affectent les autres.

Pour des transformations plus complexes, il est recommandé de sauvegarder l'état actuel du canvas avant d'appliquer des modifications, puis de le restaurer ensuite :

  • save() : Sauvegarde l'état graphique courant.
  • restore() : Restaure l'état graphique précédent.

Cela est particulièrement utile pour des mises en page complexes, comme le dessin de plusieurs objets indépendants, par exemple des voitures sur un parking, où chaque objet peut nécessiter une position et une orientation spécifiques.

Limitations et considérations

Bien que puissant, le Canvas a ses limites :

  • Le rendu de dessins 3D n'est pas directement pris en charge, bien que des techniques de simulation existent.
  • La taille maximale d'un élément Canvas peut varier selon les navigateurs et les systèmes d'exploitation.
  • Le Canvas n'est pas réactif par défaut ; la gestion des dimensions et de l'échelle pour s'adapter aux différents appareils doit être gérée via CSS ou JavaScript.
  • Le contenu d'une balise <canvas> n'est pas interprété comme faisant partie de la structure HTML, ce qui empêche l'application directe de styles CSS ou l'intégration d'autres éléments HTML. Un contenu de repli peut être affiché si le navigateur ne supporte pas le Canvas.

Apprendre les canvas en HTML & JavaScript !

tags: #cree #des #ligne #javascript #canva

Articles populaires: