Page Web 18 initiation à la balise <canvas> pour dessiner sur une page Web

Page Web 18 initiation à la balise <canvas> pour dessiner sur une page Web.

Référence du W3 sur les Canevas. Tutorial du W3 sur les Canevas.

1) Création du canvas et trace deux lignes.
Un canvas est un espace que l'on définit pour dessiner dedans.
Pour créer le canvas, vous devez écrire dans votre code HTML :

<canvas id="myCanvas" width="500" height="500" 
        style="background-color:rgb(255,255,255); border:1px solid rgb(200,200,200);">
Votre navigateur ne supporte pas le tag &lt;canvas&gt;.</canvas>

Ensuite, pour écrire dans le canvas, il faut appeler une fonction contenant du code javascript.
Elle est appelée par le bouton "Trace deux lignes".

<button type="button" onclick="Trace_lignes_1();">Trace deux lignes</button>

Le code javascript permettant de tracer les deux lignes est le suivant :
Il peut etre placé avant ou après la déclaration du canvas.
Dans cette page Web, il est placé sous le canvas et sous la form contenant les boutons et les inputs.

<script type="text/javascript">
function Trace_lignes_1() {
//=========================
// Trace deux lignes dans le canvas.

// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(0, c.height/2); // va à gauche, au milieu vertical du canvas
ctx.lineTo(c.width-1, c.height/2); // trace une ligne

ctx.moveTo(c.width/2, 0); // va au milieu horizontal du canvas, en haut
ctx.lineTo(c.width/2, c.height-1); // trace une ligne

ctx.stroke(); // c'est ici que les traits sont effectivement tracés.
} // Trace_lignes_1
</script>

Pour information, voici le code HTML de définition du canvas et de la form qui se trouve à sa droite.

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Votre navigateur ne supporte pas le tag <canvas>.</canvas>
<br><br>

<div style="position:absolute; left:550px; top:70px;" >

<a href="http://www.w3schools.com/tags/ref_canvas.asp" target="_blank">
 Référence du W3 sur les Canevas</a>.<br>
<a href="http://www.w3schools.com/html/html5_canvas.asp" target="_blank">
 Tutorial du W3 sur les Canevas</a>.<br>

<form name="maForm1"> 
A = <input name="nomA" size="8" value="100">  
B = <input name="nomB" size="8" value="?"><br>
<button type="button" onclick="Trace_lignes_1();">Trace deux lignes</button><br>
</form>
</div>

2) Exemple n°2 : trace un carré
Code javascript, très similaire au précédent.

<script type="text/javascript">
function Trace_carre() {
//=========================
// Trace un carré au milieu du canvas

// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(c.width/4,   c.height/4);   // positionnement
ctx.lineTo(c.width*3/4, c.height/4);   // segment horizontal
ctx.lineTo(c.width*3/4, c.height*3/4); // segment vertical
ctx.lineTo(c.width/4,   c.height*3/4); // segment horizontal
ctx.lineTo(c.width/4,   c.height/4  ); // segment vertical

ctx.stroke(); // c'est ici que les traits sont effectivement tracés.
} // Trace_carre
</script>

3) Le code pour divers formes.
Référence du W3 sur les Canevas pour plus de formes.

<script type="text/javascript">
function Formes_geometrique() {
//=========================
// trace divers formes géométriques

// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");

ctx.fillStyle="cyan";
ctx.fillRect(0, 0, c.width, c.height);

ctx.fillStyle="cyan";
ctx.fillRect(0, 0, c.width, c.height);

ctx.fillStyle="red";
ctx.fillRect(100, 150, 300, 150);
// posX, posY, largeur, hauteur

ctx.fillStyle = "#CC88CC";
ctx.fillRect(120, 170, 200, 100);

ctx.beginPath();
ctx.fillStyle = "rgb( 44, 200, 200)";
ctx.strokeStyle="rgb(  0,   0,   0)";
ctx.lineWidth = 3; // largeur de lignes
ctx.arc(200, 220, 50, 0, 2*Math.PI);
ctx.fill();
ctx.stroke(); // si on veut tracer le contour

ctx.beginPath();
ctx.strokeStyle="rgb(  0, 128,   0)"; // Vert foncé
ctx.lineWidth = 1; // largeur de lignes
ctx.rect(120, 170, 200, 100);
ctx.rect( 95, 145, 340, 170);
ctx.stroke(); // si on veut tracer le contour
} // Formes_geometrique
</script>

4) Le code pour effacer le contenu du canvas.

<script type="text/javascript">
function Effacer() {
//=========================
// Efface le canvas

// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");

ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.clearRect(0, 0, c.width, c.height);
} // Effacer
</script>

5) Le code pour tracer une parabole.
Il peut être amélioré sur plusieurs points !

<script type="text/javascript">
function Parabole() {
//===================
// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");

// paramètres :
var vA = parseFloat(maForm.nomA.value);
var vB = parseFloat(maForm.nomB.value);
var vC = parseFloat(maForm.nomC.value);
var nX = 0;  // pour parcourir les pixels horizontaux
var vX = 0.0;
var vY = 0.0;

// premier point
vX = -3;
vY = vA * vX*vX + vB * vX + vC;
vY = c.height/2 - vY*c.height/18;
ctx.beginPath();
ctx.moveTo(0, vY);

// trace la parabole
for (nX=0; nX<c.width; nX++) {
  // conversion de pixels en coord. du graphique
  vX = -3 + 6 * nX / c.width; // va de -3 à +3
  vY = vA * vX*vX + vB * vX + vC;
  vY = c.height/2 - vY*c.height/18;
  ctx.lineTo(nX, vY);  
  }

ctx.stroke(); // trace les lignes formant la parabole.
} // Parabole
</script>

6) Le code pour tracer un cercle.

<script type="text/javascript">
function Cercle() {
//===================
// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");

// paramètres :
var nCx = parseInt(maForm.nomCx.value);
var nCy = parseInt(maForm.nomCy.value);
var nR  = parseInt(maForm.nomR.value);
var nPt= 0; // pour parcourir les points du cercle
var vX = 0;
var vY = 0; 

// premier point
ctx.strokeStyle="#CC0000";
ctx.beginPath();
ctx.moveTo(nCx + nR, nCy);

// trace le cercle
for (nPt=0; nPt<=60; nPt++) {
  // Angle :
  vAngle = nPt * Math.PI/30; // varie de 0 à 2*PI
  vX = nCx + nR * Math.cos(vAngle);
  vY = nCy + nR * Math.sin(vAngle);
  ctx.lineTo(vX, vY);  
  }

ctx.stroke(); // trace les lignes formant la parabole.
} // Cercle
</script>

7) Le code pour tracer une spirale.
Il peut être amélioré sur plusieurs points !

<script type="text/javascript">
function Spirale() {
//===================
// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");

// paramètres :
var nCx = parseInt(maForm.nomCx.value);
var nCy = parseInt(maForm.nomCy.value);
var nR  = parseInt(maForm.nomR.value);
var nPt= 0; // pour parcourir les points du cercle
var vX = 0;
var vY = 0; 

// premier point
ctx.beginPath();
ctx.moveTo(nCx + nR, nCy);

// trace le cercle
for (nPt=0; nPt<=50*60; nPt++) {
  // Angle :
  vAngle = nPt * Math.PI/30; // varie de 0 à 2*PI
  vX = nCx + nR * Math.cos(vAngle)*10/(10+nPt/50);
  vY = nCy + nR * Math.sin(vAngle)*10/(10+nPt/50);
  ctx.lineTo(vX, vY);  
  }

ctx.stroke(); // trace les lignes formant la parabole.
} // Spirale
</script>

8) Un code pour Écrire du texte.

<script type="text/javascript">
function EcritTexte() {
//======================
// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);
} // EcritTexte
</script>

9) Le code HTML de la <form name="maForm"> pour l'insertion d'image.

Pos X=<input name="nomImPosX" size="3" value="40">  
Pos Y=<input name="nomImPosY" size="3" value="20">  
Image : <select name="inChoixImg" size="1" onchange="ChangeImage();">
<option value="BouleBlanche.png">BouleBlanche.png</option>
<option value="BouleNoire.png">BouleNoire.png</option>
<option value="BouleBleue.png">BouleBleue.png</option>
<option value="BouleRouge.png">BouleRouge.png</option>
<option value="BouleCyan.png">BouleCyan.png</option>
<option value="BouleVerte.png">BouleVerte.png</option>
<option value="ballon3.gif">ballon3.gif</option>
<option value="ballon4.gif">ballon4.gif</option>
<option value="ballon5.gif">ballon5.gif</option>
<option value="ballon6.gif">ballon6.gif</option>
<option value="Interdit_Lions.png">Interdit_Lions.png</option>
<option value="cuillere_fourchette.jpg">cuillere_fourchette.jpg</option>
</select>  
<img id="idImgInsert" src="images/BouleBlanche.png" alt="image" width="30" height="30"><br>
<button type="button" onclick="InsertionImage();">9) Insertion d'une image</button><br>

Le code javascript pour l'insertion de l'image.

<script type="text/javascript">
function InsertionImage() {
//======================
// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");
var nPosX =  parseInt(maForm.nomImPosX.value);
var nPosY =  parseInt(maForm.nomImPosY.value);

var img = document.getElementById("idImgInsert");
ctx.drawImage(img, nPosX, nPosY); // dessine l'image
} // InsertionImage

function ChangeImage() {
//======================
var img = document.getElementById("idImgInsert");
img.src="images/" + maForm.inChoixImg.value;
} // ChangeImage
</script>

10) Un code pour le mode de rendu.
Je ne comprend pas bien ces modes.
Référence sur les modes de compositions de dessins.
Le code HTML de la <form name="maForm"> pour le mode de rendu.

<a href="http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp" target="_blank">
10) Référence sur les modes de compositions de dessins</a>.<br>
?? Mode de composition ?? :<br>
<select name="inChoix" size="1" onchange="Composition();">
<option value="source-over">source-over</option>
<option value="source-atop">source-atop</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="destination-over">destination-over</option>
<option value="destination-atop">destination-atop</option>
<option value="destination-in">destination-in</option>
<option value="destination-out">destination-out</option>
<option value="lighter">lighter</option>
<option value="copy">copy</option>
<option value="xor">xor</option>
</select> <br>

Le code javascript pour le mode de rendu.

<script type="text/javascript">
function Composition() {
//======================
// Création de deux variables pour accéder au canvas
var c = document.getElementById("myCanvas");   
var ctx = c.getContext("2d");
ctx.globalCompositeOperation = maForm.inChoix.value;
} // Composition
</script>

Quelques choix de style à étudier :
ctx.strokeStyle = "#000000"; ou
ctx.strokeStyle = "rgb(0, 0, 0))"; Choisi la couleur.

ctx.lineWidth="5"; largeur de la ligne

ctx.lineCap="round"; fin de la ligne, ronde ou carrée

ctx.lineJoin="round"; jointure de lignes

ctx.lineWidth="5"; largeur de la ligne

Plan du Site : Home page18_canvas.html

Page mise à jour le 14 février 2015 par Bernard Gisin
Hébergement par : www.infomaniak.ch