Maison > interface Web > tutoriel HTML > le corps du texte

Un guide complet pour maîtriser la technologie Canvas JS

WBOY
Libérer: 2024-01-17 10:37:15
original
926 Les gens l'ont consulté

从入门到精通: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>
Copier après la connexion
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
Copier après la connexion

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);
}
Copier après la connexion

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.

  1. 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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!