Comment dessiner des graphiques sur toile en utilisant js

Sur le canevas, utilisez d'abord la méthode HTML DOM de JavaScript pour rechercher l'élément , puis utilisez la méthode getContext() pour créer un objet de dessin, et enfin utilisez les propriétés et méthodes de l'objet HTML DOM Canvas pour dessiner. graphique. Le canevas créé par l'élément

HTML5 est uniquement utilisé pour transporter des graphiques et est un conteneur, nous devons également utiliser des scripts (généralement JavaScript) pour dessiner des graphiques de manière dynamique ; . Alors, comment dessiner des graphiques sur toile en utilisant JavaScript ? Cet article vous donnera une introduction détaillée, j'espère qu'il vous sera utile.

Créer un canevas

Avant de présenter comment dessiner des graphiques, nous devons d'abord créer un canevas à l'aide de l'élément >

<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;">
当前的浏览器不支持HTML5 canvas标记。
</canvas>

Définissez la taille du canevas sur : largeur 400 px, hauteur 200 px, ajoutez une bordure rouge unie de 2 px ; donnez au canevas créé une valeur id="myCanvas" pour faciliter la recherche de l'élément de canevas lors du dessin des graphiques ci-dessous ; .

Rendu :

Utilisez JavaScript pour dessiner des graphiques sur la toile

Ci-dessous Voyons comment dessiner des graphiques sur la toile :

1. Rechercher l'élément de toile

Lorsque nous dessinons des graphiques, nous devons d'abord trouver la toile sur laquelle les graphiques doivent être dessinés, c'est-à-dire l'élément Alors comment trouver l’élément canvas ?

En fait, c'est très simple. Cela peut être fait en utilisant la méthode HTML DOM getElementById(). Par exemple :

var canvas = document.getElementById("myCanvas");// 找到画布元素

Lorsque nous avons créé le canevas auparavant, nous avons ajouté l'identifiant. ="myCanvas" à la valeur du canevas, vous pouvez maintenant utiliser cette valeur d'ID pour rechercher l'élément

2. Configurez l'environnement de dessin et créez l'objet de dessin

La méthode getContext() peut renvoyer un environnement pour dessiner sur le canevas. La seule valeur légale est actuellement. "2d" spécifie un environnement de dessin bidimensionnel ; il pourrait être étendu pour prendre en charge le dessin 3D à l'avenir. Exemple :

var ctx = canvas.getContext("2d");

À l'aide de l'objet ctx, vous pouvez dessiner des graphiques dans le canevas HTML5.

3. Dessinez des graphiques sur le canevas

À ce stade, vous pouvez utiliser les propriétés et les méthodes de l'objet HTML DOM Canvas pris en charge par JavaScript pour dessiner des graphiques. Voyons comment dessiner des graphiques à travers quelques exemples simples :

Exemple 1 : Tracez une simple ligne droite sur la toile

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext(&quot;2d&quot;);
ctx.beginPath(); // 意思是开始绘制
ctx.moveTo(0,0);  
ctx.lineTo(300,200);  
ctx.stroke(); 
</script>

Comme vous pouvez le voir , Il existe plusieurs méthodes d'utilisation de l'objet canevas. Présentons-les ci-dessous :

MéthodebeginPath() : définit le chemin de départ, ou réinitialise le chemin actuel indique le début du dessin ;

Méthode moveTo(x,y) : utilisée pour définir le point de départ de la ligne droite.

Méthode lineTo(x,y) : utilisée pour définir la position finale de la ligne droite.

Méthode Stroke() : dessine en fait le chemin défini.

Rendu :

Exemple 2 : Dessinez un simple cercle sur la toile

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext(&quot;2d&quot;);
ctx.beginPath();  
ctx.arc(95,50,40,0,2*Math.PI);  
ctx.stroke(); 
</script>

À l'aide du arc(), vous pouvez créer des arcs ou des courbes, qui peuvent être utilisés pour dessiner des cercles ou des cercles partiels.

Rendu :

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

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!