HTML5 Canvas

John Samuel
CPE Lyon

Année: 2017-2018
Courriel: john(dot)samuel(at)cpe(dot)fr

Creative Commons License

HTML5 Canvas

Objectifs

HTML5 Canvas

Histoire

Fonctionnement

<body>
...
 <canvas id="moncanvas" width="300" height="400">
 </canvas>
...
</body>

Fonctionnement

 <canvas id="moncanvas" width="300" height="400">
 </canvas>

Fonctionnement

 <canvas id="moncanvas" width="300" height="400">
 </canvas>

Fonctionnement

<body>
...
 <canvas id="moncanvas" width="300" height="400">
 </canvas>
 <script>
  var id = document.getElementById("moncanvas");
  var context = id.getContext("2d");
 </script>
...
</body>

Fonctionnement

Dans le body d'un fichier HTML

 <canvas id="moncanvas" width="300" height="400">
 </canvas>

Fonctionnement

Dans un fichier Javascript ou dans <script>...</script>

 <script>
  var id = document.getElementById("moncanvas");
  var context = id.getContext("2d");
 </script>

Fonctionnement

Changer la couleur du fond

  id.style.backgroundColor = "green";

Fonctionnement

Changer l'hauteur et la largeur d'un canvas

  id.style.width = 500;
  id.style.height = 600;

Fonctionnement

3D en utilisant le contexte WebGL

<body>
...
 <canvas id="moncanvas3D" width="300" height="400">
 </canvas>
 <script>
  var id = document.getElementById("moncanvas3D");
  var context = id.getContext("webgl");
 </script>
...
</body>

Ligne

<body>
...
 <canvas id="ligne" width="300" height="400">
 </canvas>
 <script>
  var id = document.getElementById("ligne");
  var context = id.getContext("2d");

  context.strokeStyle = "#00b33c";
  context.lineWidth = 10;
  context.moveTo(0,0);
  context.lineTo(300,400);
  context.stroke();
 </script>
...
</body>

Ligne

 <canvas id="ligne" width="300" height="400">
 </canvas>
 <script>
  var id = document.getElementById("ligne");
  var context = id.getContext("2d");

  context.strokeStyle = "#00b33c";
  context.lineWidth = 10;
  context.moveTo(0,0);
  context.lineTo(300,400);
 </script>
...

Ligne

<body>
...
 <canvas id="ligne" width="300" height="400">
 </canvas>
 <script>
  var id = document.getElementById("ligne");
  var context = id.getContext("2d");

  context.strokeStyle = "#00b33c";
  context.lineWidth = 10;
  context.moveTo(300,0);
  context.lineTo(0,400);
  context.stroke();
 </script>
...
</body>

Ligne

  context.beginPath();
  context.strokeStyle = "#00b33c";
  context.moveTo(0,0);
  context.lineTo(300,400);
  context.stroke();

Lignes

  context.beginPath();
  context.strokeStyle = "#00b33c";
  context.moveTo(0,0);
  context.lineTo(300,400);

  context.strokeStyle = "red";
  context.moveTo(0,400);
  context.lineTo(300,0);
  context.stroke();

Lignes

  context.beginPath();
  context.strokeStyle = "#00b33c";
  context.moveTo(0,0);
  context.lineTo(300,400);
  context.stroke();

  context.beginPath();
  context.strokeStyle = "red";
  context.moveTo(0,400);
  context.lineTo(300,0);
  context.stroke();

Arc

  context.beginPath();
  context.arc(200, 150, 100, Math.PI, 1.5 * Math.PI);
  context.stroke();

Arc

  context.beginPath();
  context.arc(200, 150, 100, Math.PI, 1.5 * Math.PI, true);
  context.stroke();

Arc

  context.beginPath();
  context.arc(x, y, rayon, angleInitial, angleFinal, antihoraire);
  context.stroke();

Note: Les angles dans la fonction arc sont mesurés en radians.

Arc

  context.beginPath();
  context.moveTo(0,70);
  context.lineTo(140,70);
  context.arcTo(200, 70, 200, 270, 50);
  context.lineTo(200, 270);
  context.stroke();

Arc

  context.beginPath();
  context.fillStyle = "#00b33c";
  context.moveTo(0,70);
  context.lineTo(140,70);
  context.arcTo(200, 70, 200, 270, 50);
  context.lineTo(200, 270);
  context.fill();

Arc

  context.beginPath();
  context.arcTo(x1, y1, x2, y2, rayon);
  context.stroke();

Courbe

Courbe de Bézier quadratique

  context.beginPath();
  quadraticCurveTo(cp1x, cp1y, x, y);
  context.stroke();

Courbe

  context.beginPath();
  context.moveTo(0,70);
  context.lineTo(120,70);
  context.quadraticCurveTo(280, 120, 200, 270);
  context.stroke();

Courbe

Courbe de Bézier cubique

  context.beginPath();
  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
  context.stroke();

Courbe

  context.beginPath();
  context.moveTo(0,70);
  context.lineTo(120,70);
  context.bezierCurveTo(280, 120, 240, 220, 150, 270);
  context.stroke();

Cercle

  context.beginPath();
  context.arc(150, 150, 100, 0, 2 * Math.PI);
  context.stroke();

Rectangle

  context.lineWidth = 10;
  context.rect(10, 10, 280, 280);
  context.stroke();

Rectangle

  context.strokeStyle = "#00b33c";
  context.rect(x, y, largeur, hauteur);
  context.stroke();

  context.strokeStyle = "#00b33c";
  context.strokeRect(x, y, largeur, hauteur);

  context.fillStyle = "#00b33c";
  context.fillRect(x, y, largeur, hauteur);

Rectangle

  context.fillStyle = "#00b33c";
  context.fillRect(10, 10, 280, 280);

Polygone

  context.beginPath();
  context.strokeStyle = "#00b33c";
  context.moveTo(10, 10);
  context.lineTo(150, 380);
  context.lineTo(280, 10);
  context.closePath();
  context.stroke();

Polygone

  context.beginPath();
  context.fillStyle = "#00b33c";
  context.moveTo(10, 10);
  context.lineTo(150, 380);
  context.lineTo(280, 10);
  context.closePath();
  context.fill();

Polygone

  context.beginPath();
  context.strokeStyle = "#00b33c";
  context.moveTo(10, 200);
  context.lineTo(80, 10);
  context.lineTo(200, 10);
  context.lineTo(270, 200);
  context.lineTo(200, 380);
  context.lineTo(80, 380);
  context.closePath();
  context.stroke();

Polygone

  context.beginPath();
  context.fillStyle = "#00b33c";
  context.moveTo(10, 200);
  context.lineTo(80, 10);
  context.lineTo(200, 10);
  context.lineTo(270, 200);
  context.lineTo(200, 380);
  context.lineTo(80, 380);
  context.lineTo(80, 380);
  context.closePath();
  context.fill();

Effacer une zone

  context.clearRect(90, 140, 100, 100);

Texte

  context.font = "40px Arial";
  context.strokeText("Bonjour!", 100, 100);

Texte

  context.font = "40px Arial";
  context.fillText("Bonjour!", 100, 100);

Texte

  context.font = "40px Arial";
  context.strokeText("Bonjour!", 100, 100);

L'alignement du texte

context.font = "30px Arial";
context.textAlign = "start";
context.fillText("début", 250, 20);

context.textAlign = "end";
context.fillText("fin1 fin2 fin3 fin4 fin5 fin6", 250, 100);

context.textAlign = "left";
context.fillText("gauche1 gauche2 gauche3 gauche4", 250, 180);

context.textAlign = "right";
context.fillText("droite1 droite2 droite3 droite4", 250, 260);

context.textAlign = "center";
context.fillText("centre", 250, 340);

L'alignement de base

context.font = "20px Arial";
context.textBaseline = "top";
context.fillText("haut", 0, 200);

context.textBaseline = "middle";
context.fillText("moyen", 150, 200);

context.textBaseline = "alphabetic";
context.fillText("alphabetique", 250, 200);

context.textBaseline = "bottom";
context.fillText("en bas", 420, 200);

Images

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.drawImage(img, 0, 0);
}

Images: Mise à l'échelle

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.drawImage(img, 0, 0, 500, 400);
}

Images

  void context.drawImage(image, dx, dy);
  void context.drawImage(image, dx, dy, dLargeur, dHauteur);
  void context.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);

Images: Mise à l'échelle

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.drawImage(img, 0, 0, 250, 200);
  context.drawImage(img, 250, 0, 250, 200);
  context.drawImage(img, 0, 200, 250, 200);
  context.drawImage(img, 250, 200, 250, 200);
}

Images: Découpage

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.drawImage(img, 100, 100, 500, 400, 250, 250, 150, 150);
}

Images: Rotation

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.rotate(10*Math.PI/180);
  context.drawImage(img, 200, 0, 200, 200);
}

Images: Mise à l'échelle

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.scale(0.5, 0.5);
  context.drawImage(img, 200, 0, 200, 200);
}

Image: Déplacement

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.drawImage(img, 0, 0, 200, 200);
  context.translate(200, 200);
  context.drawImage(img, 0, 0, 400, 400);
}

Images: Transformation

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.drawImage(img, 0, 0, 200, 200);
  context.transform(0.5, 0.5, -0.5, 0.5, 300,10);
  context.drawImage(img, 0, 0, 400, 400);
}

Interaction: Clavier

 document.onkeydown = function(event) {
  event.preventDefault();

  event = event || window.event;
  if (event.keyCode == '37') {
   // gauche
  }
  else if (event.keyCode == '38') {
   // haut
  }
  else if (event.keyCode == '39') {
   // droite
  }
  else if (event.keyCode == '40') {
   // bas
  }
 }

Interaction: Souris

 document.getElementById("moncanvas").onmousedown = function(event) {
  event = event || window.event;
  event.preventDefault();

  var posX = event.pageX - canvas.offsetLeft;
  var posY = event.pageY - canvas.offsetTop;
}

Interaction: Souris

document.body.onmouseup = function(event) {
  event = event || window.event;
  event.preventDefault();
}

HTML5 Canvas et SVG

SVG Canvas
Pour les images vectorielles Pour les images matricielles
XML Javascript
Manipulation facile des événements du DOM Correspondence des coordonnées du pointeur et d'image

HTML5 Canvas

Références

Crédits d'images