https://mabboux.pagesperso-orange.fr/informatique/javascript/courbe/jsCourbe.htm

Tracer une courbe en javascript

Voici un script courbe.js qui permet de tracer une courbe à partir d'une liste de données. Ce scripte génère à titre d'exemple une liste M de 200 entiers au hasard compris entre 0 et 100, et l'affiche sous forme de courbe. La commande suivante met en mémoire dans la variable W1 l'élément de la page web dont l'identifiant est "canvas1".

    W1 = document.getElementById("canvas1")

Cet élément W1 correspond à l'élément définie dans le fichier html par :

    <canvas id="canvas1" width="800" height="400"></canvas>

Puis le scripte execute la commande suivante :

    draw(W1, M, 4, 4, "Valeur", "N° d'enregistrement", "Liste des valeurs", "dans l'ordre de leur enregistrement")

Cette commande va afficher la courbe définie par M dans le canevas W1 en tenant compte de la taille de W1, c'est à dire des attributs width et height de W1. La courbe définie par M trace les points (i,M[i]) reliés par segment de droite au point précédent. L'ordonnée i variant de 0 à M.length-1. L'abscisse M[i] varie du minimum au maximum de M. Le graphique et segmenté en au moins 4 segments en abscisse et 4 segments en ordonnée. Puis le scripte trie la liste M dans l'ordre croissant à l'aide de la commande suivante :

    M.sort(function(a,b){return a>=b})

et réaffiche la courbe dans le caneva W2 à l'aide de la commande suivante :

    draw(W2, M, 4, 4, "Valeur", "N° d'ordre", "Rangement des valeurs", "dans l'ordre croissant")

oOo

Dessiner des formes avec le canevas

https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques