Comment dessiner des graphiques complexes avec JavaScript

JavaScript est un langage de programmation très puissant qui joue un rôle important dans le développement Web moderne. En plus de réaliser des interactions avec des pages Web et des effets dynamiques, JavaScript peut également réaliser divers graphiques complexes via l'API de dessin. Ainsi, cet article vous expliquera comment dessiner des graphiques complexes avec JavaScript.

Canvas et contexte

Pour implémenter des graphiques en Javascript, nous devons d'abord créer un élément de canevas (Canvas), puis obtenir son contexte (Context). Canvas est une balise HTML5 qui vous permet de créer une zone rectangulaire avec des capacités de dessin sur une page Web. Le but de l'obtention du contexte est d'utiliser l'API de dessin fournie par Canvas.

Créer un élément Canvas est très simple, il suffit d'ajouter le code suivant au HTML :

<canvas id="myCanvas">
  Your browser does not support this feature.
</canvas>

L'attribut id peut être utilisé pour obtenir l'élément canvas, et le texte imbriqué au milieu de la balise est affiché dans les navigateurs qui ne le font pas prend en charge le texte Alt du canevas. Ensuite, nous pouvons utiliser JavaScript pour obtenir l'élément canevas et le contexte. Le code est le suivant :

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

Ici, nous utilisons la méthode getElementById de l'objet document pour obtenir l'élément canvas avec l'identifiant myCanvas, et obtenons le contexte 2D via la méthode getContext. Canvas prend en charge 3 types de contexte : 2D, WebGL et WebGL2. Dans cet article, nous utiliserons le contexte 2D.

Dessiner des formes de base

Après avoir obtenu le contexte 2D, nous pouvons commencer à dessiner. L'API Canvas fournit une série de méthodes pour décrire les formes de base, les plus couramment utilisées sont : rect, arc, ligne, etc.

Par exemple, nous pouvons dessiner un rectangle via le code suivant :

ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);

Dans le code ci-dessus, la propriété fillStyle est utilisée pour définir la couleur de remplissage et la méthode fillRect est utilisée pour dessiner le rectangle. Les paramètres de la méthode fillRect sont les coordonnées du coin supérieur gauche du rectangle (x, y), ainsi que la largeur et la hauteur du rectangle (largeur, hauteur).

Ensuite, nous pouvons tracer un cercle à travers le code suivant :

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#FFFF00";
ctx.fill();

Dans le code ci-dessus, utilisez la méthode startPath pour commencer à tracer un nouveau chemin. La méthode arc est utilisée pour tracer un chemin circulaire. Les paramètres sont les coordonnées centrales. (x, y), rayon (r), angle de départ (startAngle) et angle de fin (endAngle). Puisque nous voulons tracer un cercle complet, l’angle de départ est 0 et l’angle final est 2π. Enfin, définissez la couleur de remplissage sur jaune et utilisez la méthode de remplissage pour remplir le chemin.

Dessiner des formes complexes

En plus des formes de base, nous pouvons également utiliser l'API Canvas pour dessiner diverses formes complexes. Cela nécessite l'utilisation d'objets Path2D et de courbes de Bézier.

L'objet Path2D est une structure de données qui enregistre les chemins complexes peuvent être décrits via cet objet. Par exemple, le code suivant dessine un chemin composé de 3 segments de ligne :

let path = new Path2D();
path.moveTo(0, 0);
path.lineTo(0, 50);
path.lineTo(50, 50);
ctx.stroke(path);

Dans le code ci-dessus, utilisez la méthode moveTo pour définir le point de départ du chemin sur (0,0), utilisez la méthode lineTo pour tracer 3 lignes segments en séquence, et enfin utilisez la méthode Stroke pour tracer un chemin.

La courbe de Bézier est une fonction mathématique utilisée pour décrire des courbes lisses. L'API Canvas fournit deux méthodes, quadraticCurveTo et bezierCurveTo, pour dessiner des courbes de Bézier quadratiques et cubiques.

Par exemple, le code suivant dessine un chemin de courbe de Bézier cubique composé de 3 points :

let path = new Path2D();
path.moveTo(20, 20);
path.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke(path);

Dans le code ci-dessus, utilisez la méthode moveTo pour définir le point de départ du chemin sur (20,20), et la méthode bezierCurveTo suit immédiatement trois ensembles de paramètres, à savoir 2 points de contrôle et 1 point final. Selon la définition d'une courbe de Bézier cubique, le point de départ et le point final se trouvent sur la courbe, et les points de contrôle affectent la courbure de la courbe.

Dessinez des dégradés et des images

En plus des formes, l'API Canvas prend également en charge le dessin de dégradés et d'images. Regardez d’abord comment les dégradés sont dessinés.

Le dégradé peut être utilisé pour la couleur de remplissage ou la couleur du trait. L'API Canvas prend en charge les dégradés linéaires et les dégradés radiaux. Voici le code pour remplir un rectangle à l'aide d'un dégradé linéaire :

let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#00FF00');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Dans le code ci-dessus, la méthode createLinearGradient est utilisée pour créer un dégradé linéaire, et les paramètres sont les coordonnées du point de départ (x0, y0) et le point final coordonnées (x1, y1). La méthode addColorStop est utilisée pour définir la position et la valeur de la couleur du dégradé, où le paramètre de position est une valeur comprise entre 0 et 1.

Ensuite, jetons un coup d’œil au dessin d’images.

L'API Canvas prend en charge l'utilisation d'images comme canevas, ce qui permet d'obtenir des effets plus complexes. Voici le code pour remplir un rectangle avec une image :

let img = new Image();
img.onload = function(){
  let pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'image.png';

Dans le code ci-dessus, nous créons d'abord un objet image et définissons l'événement onload pour celui-ci. Une fois l'image chargée, nous utilisons la méthode createPattern pour créer le motif, et les paramètres sont l'objet image et la méthode de dessin (« répéter » signifie expansion des tuiles). Enfin, utilisez la méthode fillRect pour remplir le motif.

Résumé

Grâce à l'introduction de l'API Canvas, nous pouvons savoir que JavaScript peut être utilisé pour dessiner divers graphiques complexes. En plus des formes de base, divers chemins complexes peuvent être décrits via les objets Path2D et les courbes de Bézier. Grâce aux dégradés et au dessin d'images, nous pouvons également obtenir des effets plus riches. Bien sûr, il ne s'agit que d'une brève introduction. L'API Canvas est riche en fonctions et dispose de nombreuses méthodes d'application plus avancées, qui nécessitent que nous continuions à apprendre et à pratiquer.

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!