Un guide complet pour maîtriser la technologie Canvas JS

Du débutant au compétent : guide technique Canvas JS

Introduction :
Canvas est une fonctionnalité importante du HTML5 qui permet de dessiner dynamiquement des graphiques via JavaScript. Il fournit de puissantes fonctions de dessin qui peuvent être utilisées pour créer des graphiques, dessiner des graphiques et afficher des données. Cet article utilisera des exemples de code pour guider progressivement les lecteurs à se familiariser avec la technologie Canvas JS dès le niveau d'entrée afin de vous aider à améliorer vos capacités de dessin.

1. Utilisation de base de Canvas
Nous devons d'abord ajouter un élément Canvas au fichier HTML, puis utiliser JavaScript pour obtenir son contexte. Voici un exemple simple :

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

Avec le code ci-dessus, nous créons un canevas d'une taille de 500x500 pixels et obtenons son contexte de dessin.

2. Dessinez des graphiques de base

1. Dessinez un rectangle

   context.fillStyle = "red";
   context.fillRect(100, 100, 200, 150);

   Copier après la connexion

   Le code ci-dessus dessinera un rectangle rouge sur la toile, avec les coordonnées du point de départ étant (100, 100), une largeur de 200 et une hauteur de 150.

2. Dessinez un cercle

   context.beginPath();
   context.arc(250, 250, 100, 0, Math.PI * 2, false);
   context.fillStyle = "green";
   context.fill();

   Copier après la connexion

   Le code ci-dessus dessine un cercle vert avec une coordonnée centrale de (250, 250) et un rayon de 100.

3. Dessinez une ligne droite

   context.beginPath();
   context.moveTo(100, 100);
   context.lineTo(300, 300);
   context.lineWidth = 5;
   context.strokeStyle = "blue";
   context.stroke();

   Copier après la connexion

   Le code ci-dessus trace une ligne droite avec les coordonnées du point de départ comme (100, 100), les coordonnées du point final comme (300, 300), la largeur de la ligne est de 5 et la couleur est bleu.

3. Dessinez un graphique

1. Dessinez un graphique à barres

var data = [30, 50, 70, 90];
var colors = ["red", "green", "blue", "yellow"];

// 绘制坐标系
context.beginPath();
context.moveTo(50, 50);
context.lineTo(50, 350);
context.lineTo(450, 350);
context.stroke();

for (var i = 0; i < data.length; i++) {
  var barHeight = data[i];
  var barX = 60 + i * 80;
  var barY = 350 - barHeight;

  // 绘制柱状图
  context.fillStyle = colors[i];
  context.fillRect(barX, barY, 50, barHeight);
}

Le code ci-dessus dessine un graphique à barres simple. Le tableau de données stocke la hauteur de chaque colonne et le tableau de couleurs stocke la couleur de chaque colonne. Parcourez le tableau de données à travers une boucle for et dessinez chaque colonne tour à tour.

2. Dessiner un diagramme circulaire

var data = [20, 30, 40, 10];
var colors = ["red", "green", "blue", "yellow"];

var total = data.reduce(function (a, b) {
  return a + b;
}, 0);

var startAngle = 0;

for (var i = 0; i < data.length; i++) {
  var endAngle = startAngle + (data[i] / total) * Math.PI * 2;

  context.beginPath();
  context.moveTo(250, 250);
  context.arc(250, 250, 200, startAngle, endAngle, false);
  context.closePath();

  context.fillStyle = colors[i];
  context.fill();

  startAngle = endAngle;
}

Le code ci-dessus dessine un diagramme circulaire. Le tableau de données stocke la taille de chaque secteur et le tableau de couleurs stocke la couleur du secteur. Calculez l'angle de départ et l'angle de fin de chaque secteur à travers une boucle et utilisez la méthode de l'arc pour dessiner le secteur.

Conclusion :
Cet article présente l'utilisation de base de la technologie Canvas JS et le processus de dessin de graphiques à travers des exemples de code. Canvas offre une multitude de fonctions de dessin, qui peuvent être utilisées du simple dessin graphique à l'affichage de graphiques complexes. J'espère que cet article pourra aider les lecteurs à approfondir leur compréhension des technologies Canvas JS, à les appliquer dans des projets réels et à améliorer leurs capacités de dessin.

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!