≡ Programmmes en javascript

Courbe d'une fonction dans un canvas en javascript

Graphique et élément canvas

L'élément canvas permet de tracer à peu près toute sorte de graphiques, dessins, images, … et de les animer ou les rendre interactif via javascript.
Dans cette page, on décrit comment utiliser l'élément canvas pour dessiner un élément fondamental en maths: la courbe représentative d'une fonction.
On prendra ici une fonction simple, à une seule variable, ici la fonction dont l'expression algébrique est
f(x) = 0,5x3 − x2 + 2
mais on peut adapter ce code sans problème à tout type de représentation graphique (courbes paramétrées, ...).
Tout d'abord, voilà le résultat, le graphe de la fonction, avec quelques éléments graphiques de plus: écriture du nom de la courbe Cf, la représentation graphique d'un point de la courbe avec ses coordonnées, abscisses et ordonnées:
Votre navigateur ne semble pas assez récent pour afficher ce graphique...


Définition de l'élément canvas: html et css

Tout d'abord l'élément canvas en html, entouré d'un cadre pour le dimensionner (et éventuellement le rendre re-dimensionnable dynamiquement à loisir via javascript).
Le dimensionnement se fait simplement en style css (à placer avec le reste du style css de la page ...).
L'élément canvas est en fait vide, juste un petit message d'erreur pour les utilisateurs de navigateur qui ne supporte pas l'élément canvas.
Toute la partie graphique est traitée ensuite en javascript. 
<style>#Overcnv0{width:400px;height:400px;margin-top:1em;max-width:95%;margin:0 auto}</style>
<div id="Overcnv0">
  <canvas id="canvas0">
    Votre navigateur ne semble pas assez récent pour afficher ce graphique...
  </canvas>
</div>

Dessin de la courbe en javascript

Le dessin de la courbe de la fonction, avec sa définition, vient ensuite donc en javascript.
On récupère les dimensions du canvas Width et Height, ensuite on définit les fonctions qui permettent de changer de repère et de système de coordonnées: les 4 fonctions cnv2x, cnv2y, xcnv2 et y2cnv.
On trace ensuite un quadrillage puis les points de la courbe à tracer. 
<script>
  Width=document.getElementById("Overcnv0").clientWidth;
  Height=document.getElementById("Overcnv0").clientHeight;
  document.getElementById("canvas0").width=Width-2;
  document.getElementById("canvas0").height=Height-2;
  canvas = document.getElementById("canvas0");
  ctx = canvas.getContext("2d");
  xmin=-2.3;xmax=3.5;ymin=-2.3;ymax=5.2;
  function cnv2x(X) {return X*(xmax-xmin)/Width+xmin;}
  function cnv2y(Y) {return (Height-Y)*(ymax-ymin)/Height+ymin;}
  function x2cnv(x) {return Width*(x-xmin)/(xmax-xmin);}
  function y2cnv(y) {return Height-Height*(y-ymin)/(ymax-ymin);}
 // Grid: quadrillage de fond
  ctx.font = ".9em Arial";
  ctx.fillStyle = "black";ctx.strokeStyle = "black";ctx.lineWidth=2;
  ctx.beginPath();ctx.moveTo(x2cnv(xmin),y2cnv(0));ctx.lineTo(x2cnv(xmax),y2cnv(0));ctx.stroke();
  ctx.beginPath();ctx.moveTo(x2cnv(0),y2cnv(ymin));ctx.lineTo(x2cnv(0),y2cnv(ymax));ctx.stroke();
  ctx.strokeStyle = "black";
  xmingrid=-2;ymingrid=-2;
  Qdx=1;
  Qdy=1;
  for (i=0;i<10;i++) {
    ctx.lineWidth=.2;ctx.textAlign="center";ctx.textBaseline ="middle";
    ctx.beginPath();ctx.moveTo(x2cnv(xmingrid+i*Qdx),y2cnv(ymin));ctx.lineTo(x2cnv(xmingrid+i*Qdx),y2cnv(ymax));ctx.stroke();
    ctx.fillText(String(xmingrid+i*Qdx),x2cnv(xmingrid+i*Qdx),y2cnv(0)+12);
    ctx.lineWidth=2;
    ctx.beginPath();ctx.moveTo(x2cnv(xmingrid+i*Qdx),y2cnv(0)+3);ctx.lineTo(x2cnv(xmingrid+i*Qdx),y2cnv(0)-3);ctx.stroke();
  }
  for (i=0;i<10;i++) {
    ctx.lineWidth=.2;ctx.textAlign="right";
    ctx.beginPath();ctx.moveTo(x2cnv(xmin),y2cnv(ymingrid+i*Qdy));ctx.lineTo(x2cnv(xmax),y2cnv(ymingrid+i*Qdy));ctx.stroke();
    ctx.fillText(String(ymingrid+i*Qdy),x2cnv(0)-7,y2cnv(ymingrid+i*Qdy)+5);
    ctx.lineWidth=2;
    ctx.beginPath();ctx.moveTo(x2cnv(0)-3,y2cnv(ymingrid+i*Qdy));ctx.lineTo(x2cnv(0)+3,y2cnv(ymingrid+i*Qdy));ctx.stroke();
  }

 // La définition de l expression de la fonction: 
  function f(x) {return .5*x*x*x - x*x +2;}

 // et on commence à tracer
  ctx.beginPath();
  x=xmin;ctx.moveTo(x2cnv(x),y2cnv(f(x)));
  h=(xmax-xmin)/100;
  for (i=0;i<100;i++) {x=x+h;ctx.lineTo(x2cnv(x),y2cnv(f(x)));}
  ctx.stroke();
  ctx.font = "1.4em times";ctx.fillStyle = "green";
  ctx.fillText("C",x2cnv(-.8),y2cnv(1.6));
  ctx.font = "1.1em times";
  ctx.fillText("f",x2cnv(-.8)+4,y2cnv(1.6)+4);
		  
  ctx.fillStyle = "red";ctx.strokeStyle = "red";ctx.lineWidth=2;ctx.setLineDash([5, 5]);
  x=2.5;y=f(x);
  ctx.beginPath();ctx.moveTo(x2cnv(x),y2cnv(0));
  ctx.lineTo(x2cnv(x),y2cnv(y));
  ctx.lineTo(x2cnv(0),y2cnv(y));
  ctx.stroke();
  ctx.font = "italic 1.2em times";ctx.textAlign="center";ctx.textBaseline ="middle";
  ctx.fillText("x",x2cnv(x),y2cnv(y));ctx.fillText("M",x2cnv(x)+15,y2cnv(y)-5);
  ctx.fillText("x",x2cnv(x),y2cnv(0)+10);
  ctx.textAlign ="right";
  ctx.fillText("y=f(x)",x2cnv(0)-5,y2cnv(y));
</script>

Textes mathématiques dans le canvas

Pour l'écriture de texte mathématique, une police adéquate est times, en italic, qu'on indique avec la commande 
ctx.font = "italic 1.2em times"
puis de l'usage de 
ctx.fillText( ... )

Pour de plus amples détails pour l'écriture de mathématiques dans une page web, en html / css, consulter l'article sur l'écriture de mathématiques en html / css.

Voir aussi:
LongPage: h2: 4 - h3: 0