Canvas.

Rappels.


Le tracé de lignes.

Pour effectuer un tracé, une ligne par exemple, nous avons besoin de quatre instructions. Ensuite, nous pouvons lui assigner une couleur (name, #000, rgb(), rgba() de remplissage ou de contour. Il est aussi possible d'assigner une épaisseur à la ligne dont l'unité par défaut est exprimée en pixel, pour toute autre valeur, il faudra donc l'indiquer.

beginPath();  	// déclare le début du tracé.
moveTo();	// point de départ du tracé.
lineTo();	 	// le tracé à proprement parlé.
stroke();	 	// dessine le tracé.

strokeStyle =  // couleur de contour ou du tracé.
fillStyle =    	// couleur de la forme.

lineWidth =	 // épaisseur de la ligne.
									

Si l'on veut assigner une nouvelle couleur à une forme, il faudra créer une nouvelle forme en utilisant la fonction 'beginPath'.

 	ctx.beginPath();
  	ctx.strokeStyle='#094ED2';
 	ctx.lineWidth = 3;
  	ctx.moveTo(50,150);
  	ctx.lineTo(150,50);
  	ctx.stroke(); 
 
 	ctx.beginPath();
  	ctx.strokeStyle='#D2091C';
  	ctx.lineWidth = 3;
  	ctx.moveTo(50,50);
  	ctx.lineTo(150,150);
  	ctx.stroke(); 
									

Les extrémités des lignes peuvent prendre trois valeurs via l'attribut 'lineCap' lorsque l'épaisseur de la ligne est supérieur à troix pixels. Par contre, le rajout de la forme d'un bout augmente la longueur de la ligne proportionellement à sa largeur.

  ctx.lineCap = 'butt'; // valeur par défaut

  ctx.lineCap = 'round';

  ctx.lineCap = 'square';
									

Le tracé de courbes.

Il existe deux fonctions pour tracer des courbes, 'quadraticCurveTo' et 'bezierCurveTo'. La courbe quadratique est une parabole qui peut être symétrique ou asymétrique. Elle ne possède qu'un seul point d'inflection. La courbe de bézier est une combinaison d'arcs qui possède au moins deux points d'inflections. La fonction 'quadraticCurveTo' à un point de départ, un point de contrôle qui est la limite externe de la courbe et un point d'arrivé.

 
quadraticCurveTo(ctx,cty, x, y); 
  // ctx: point de contrôle.
  // cty: où s'inverse le sens de la courbe.
  // x, y: le point d'arrivée.
									
  ctx.beginPath();
  ctx.strokeStyle='#55A0FF';
  ctx.lineWidth = 3;
  
  ctx.moveTo(20, 100);
  ctx.quadraticCurveTo(60,10, 100, 100);
  
  ctx.stroke();
									

Le tracé des cercles.

Pour tracer un cercle, on utilise la méthode 'arc' avec une longueur de 2*PI.

arc(x,  y,  r,  0,  2 * Math.PI);
// x, y = centre du cercle dans le canvas.
// r = rayon.
// 0 = angle de départ.
// 2*Math.PI = angle final
									
  ctx.beginPath();
  ctx.strokeStyle= '#D16DBA';
  ctx.lineWidth="2";
  ctx.arc(100, 100, 50, 0, 2 * Math.PI);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.fillStyle= '#55A0FF';
  ctx.arc(220, 100, 50, 0, 2 * Math.PI);
  ctx.fill();
  
  ctx.beginPath();
  ctx.strokeStyle='#55A0FF';
  ctx.fillStyle= '#AA4A89';
  ctx.lineWidth="5";
  ctx.arc(340, 100, 50, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.fill();
									

ATTENTION ! Lorsqu'on utilise un attribut ('strokeStyle', 'fillStyle'), ne pas oublier de rappeler la fonction !


Le tracé des rectangles.

Ils peuvent être vides ou pleins tout comme les cercles. La méthode à utiliser est:

 rect(x,  y,  [width]  [height] )
 // point de départ, coin supérieur gauche.
 // width: longueur horizontale.
 // height: longueur verticale.
									
  ctx.beginPath();
  ctx.strokeStyle="#AA4A89";   
  ctx.lineWidth="3";   
  ctx.rect(10,10,200,100);
  ctx.fillStyle="#D16DBA";
  ctx.fill();
  ctx.stroke();
  
  ctx.beginPath();
  ctx.strokeStyle="#170BF5";   
  ctx.lineWidth="3";   
  ctx.rect(150,60,100,100);
  ctx.fillStyle="rgba(85, 160, 255, 0.5)";
  ctx.fill();
  ctx.stroke();
									

fillRect.

La méthode ' fill(); ' permet de remplir n'importe quelle forme (ligne, cercle, rectangle etc) qui soit fermée. Par contre, la méthode ' fillRect(); ' dessine spécifiquement un rectangle sans bordure et s'utilise de cette manière:

    function rectangle01() {
      var canvas = document.getElementById("canvas05");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.fillStyle ="rgba(85, 160, 255, 0.5)";
ctx.fillRect(150,60,100,100);
    }
   }
									

Le texte dans canvas.

Les méthodes utilisées pour le texte sont similaires aux figures géométriques et sont:

font = " [taille] [famille]";		

textAlign = " [start] [end] [left] [right] [center] ";

textBaseline = " [top] [hanging (suspendu)] [middle (moyen)] [alphabetic (défaut)] 
			[ideographic] [bottom]";

direction = " [ltr] [rtl] [inherit (défaut)]";					 		
							 		
strokeText (" [chaine de caractère]" [x] [y] )

fillText(" [chaine de caractère]" [x] [y] )
									

'font' utilise la même syntaxe qu'en CSS. Par défaut, ses valeurs sont 'Sans Serif' et 10px.

ASTUCE: pour avoir une couleur de fond qui s'étend sur toute la surface d'affichage utiliser la propriété 'fillRect' dont le point d'origine se situ à 0,0 et récuperer la taille de la surface avec 'canvas.width' et 'canvas.height'.

Problèmes: N'utilise pas la bonne police ?! Ne demande pas d'appeler la fonction stroke(); ou fill(); ?! A creuser.

  <script type="application/javascript">
    function texte01() {
      var canvas = document.getElementById("canvas06");
     	 if (canvas.getContext) {
        	var ctx = canvas.getContext("2d");

   	ctx.fillStyle = "#3A3291";
  	ctx.fillRect(0, 0, canvas.width, canvas.height);

	ctx.font = "3em  Roboto";
   	ctx.strokeStyle = "#55A0FF";  // bleu clair
   	ctx.lineWidth="6";
   
   	ctx.fillStyle = "#C9DFBD"; // vert clair
     
   	ctx.strokeText("Titre Deux", 40, 60);
  
	ctx.fillText("Titre Deux", 40, 60);

    	}
   }
  </script>
									

CanvasGradient.



Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/07/2021

>