Dessiner sur le Web avec le contexte de rendu Canvas

Comment procéderiez-vous pour créer une application de dessin 2D dans le navigateur ?

L'élément HTML Canvas, associé à l'interface CanvasRenderingContext2D, fournit un moyen simple de dessiner des graphiques sur le Web.

Remarque : Deux options alternatives pour dessiner sur le Web sont WebGL et SVG.

CanvasRenderingContext2D

L'interface CanvasRenderingContext2D fournit le contexte de rendu 2D pour la surface de dessin d'un élément de canevas. Il est utilisé pour dessiner des formes, du texte, des images et d'autres objets sur la toile.

Il s'agit de graphiques raster par opposition aux graphiques vectoriels que SVG utilise. Les graphiques raster sont constitués de pixels, tandis que les graphiques vectoriels sont constitués de chemins. Le raster ne le fait pas
échelle de haut en bas ainsi que des graphiques vectoriels.

Cas d'utilisation

Certains cas d'utilisation courants du canevas 2D incluent :

• Retouche photo
• Applications de dessin/esquisse
• Jeux simples

Exemple d'application

Dans cet exemple, nous avons quelques exigences simples :

• L'utilisateur peut tracer des lignes sur la toile
• L'utilisateur peut définir un arrière-plan
• L'utilisateur peut choisir les couleurs d'arrière-plan et de ligne à partir d'un sélecteur de couleurs EyeDropper et de la palette de couleurs fournie par défaut
• L'utilisateur peut effacer le canevas
• L'utilisateur peut annuler/rétablir
• L'utilisateur peut télécharger le dessin sous forme d'image
• L'utilisateur peut faire tout ce qui précède avec des raccourcis clavier

codesandbox.io

Idées de fonctionnalités

Vous pouvez pousser cet exemple plus loin en ajoutant plus de fonctionnalités telles que :

Personnalisation du stylo : un formulaire pour permettre à l'utilisateur de personnaliser la taille et le coup de pinceau du stylo.

Enregistrement de l'état de l'image dans un magasin persistant : l'état de l'image est actuellement stocké dans l'état du composant. Vous pouvez enregistrer l'état de l'image dans un magasin persistant tel qu'un stockage local ou une base de données.

Ajout de texte : ajoutez un nouveau bouton d'action pour permettre à l'utilisateur d'ajouter du texte au canevas. L'interface CanvasRenderingContext2D fournit
Méthodes StrokeText et fillText pour dessiner du texte sur le canevas.

Ajout d'images : permet à l'utilisateur de télécharger des images sur le canevas. L'interface CanvasRenderingContext2D fournit une méthode drawImage pour dessiner des images sur le canevas. Cela pourrait vraiment ouvrir de nombreuses possibilités pour l'application.

Ajout d'un système de calques : permet à l'utilisateur d'ajouter plusieurs calques au canevas. Cela permettrait à l'utilisateur de dessiner sur différents calques et de basculer la visibilité de chaque calque. Ce serait une fonctionnalité plus complexe à mettre en œuvre mais offrirait beaucoup de flexibilité à l'utilisateur.

Remplir la zone : ajoutez un nouveau bouton d'action pour permettre à l'utilisateur de remplir une zone avec une couleur. L'interface CanvasRenderingContext2D fournit une méthode de remplissage pour remplir une zone avec le style de remplissage actuel.

Pensées finales

Il convient de mentionner à nouveau que WebGL et SVG sont deux autres options intéressantes pour dessiner sur le Web qui méritent d'être étudiées.

Les documents MDN pour l'interface CanvasRenderingContext2D sont une excellente ressource pour en savoir plus sur le canevas 2D.

Prenez cet exemple et courez avec ! Il existe de nombreuses possibilités pour créer des applications de dessin intéressantes et interactives sur le Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!