HTML5 Canvas
HTML Canvas

John Samuel
CPE Lyon

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

Creative Commons License

HTML5 Canvas | John Samuel
1

HTML5 Canvas

Objectifs

HTML5 Canvas | John Samuel
2

HTML5 Canvas

Histoire

HTML5 Canvas | John Samuel
3

Fonctionnement

<body>
...
 <canvas id="moncanvas" width="300" height="400">
 </canvas>
...
</body>
HTML5 Canvas | John Samuel
4

Fonctionnement

 <canvas id="moncanvas" width="300" height="400">
 </canvas>
HTML5 Canvas | John Samuel
5

Fonctionnement

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

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>
HTML5 Canvas | John Samuel
7

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>
HTML5 Canvas | John Samuel
8

Ligne

  context.beginPath();
  context.strokeStyle = "#00b33c";
  context.moveTo(0,0);
  context.lineTo(300,400);
  context.stroke();
HTML5 Canvas | John Samuel
9

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();
HTML5 Canvas | John Samuel
10

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();
HTML5 Canvas | John Samuel
11

Arc

  context.beginPath();
  context.arc(200, 150, 100, Math.PI, 1.5 * Math.PI);
  context.stroke();
HTML5 Canvas | John Samuel
12

Arc

  context.beginPath();
  context.arc(200, 150, 100, Math.PI, 1.5 * Math.PI, true);
  context.stroke();
HTML5 Canvas | John Samuel
13

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.
HTML5 Canvas | John Samuel
14

Arc

  context.beginPath();
  context.moveTo(0,70);
  context.lineTo(140,70);
  context.arcTo(200, 70, 200, 270, 50);
  context.lineTo(200, 270);
  context.stroke();
HTML5 Canvas | John Samuel
15

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();
HTML5 Canvas | John Samuel
16

Arc

  context.beginPath();
  context.arcTo(x1, y1, x2, y2, rayon);
  context.stroke();
HTML5 Canvas | John Samuel
17

Courbe

Courbe de Bézier quadratique

  context.beginPath();
  quadraticCurveTo(cp1x, cp1y, x, y);
  context.stroke();
HTML5 Canvas | John Samuel
18

Courbe

  context.beginPath();
  context.moveTo(0,70);
  context.lineTo(120,70);
  context.quadraticCurveTo(280, 120, 200, 270);
  context.stroke();
HTML5 Canvas | John Samuel
19

Courbe

Courbe de Bézier cubique

  context.beginPath();
  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
  context.stroke();
HTML5 Canvas | John Samuel
20

Courbe

  context.beginPath();
  context.moveTo(0,70);
  context.lineTo(120,70);
  context.bezierCurveTo(280, 120, 240, 220, 150, 270);
  context.stroke();
HTML5 Canvas | John Samuel
21

Cercle

  context.beginPath();
  context.arc(150, 150, 100, 0, 2 * Math.PI);
  context.stroke();
HTML5 Canvas | John Samuel
22

Rectangle

  context.lineWidth = 10;
  context.rect(10, 10, 280, 280);
  context.stroke();
HTML5 Canvas | John Samuel
23

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);
HTML5 Canvas | John Samuel
24

Rectangle

  context.fillStyle = "#00b33c";
  context.fillRect(10, 10, 280, 280);
HTML5 Canvas | John Samuel
25

Polygone

  context.beginPath();
  context.strokeStyle = "#00b33c";
  context.moveTo(10, 10);
  context.lineTo(150, 380);
  context.lineTo(280, 10);
  context.closePath();
  context.stroke();
HTML5 Canvas | John Samuel
26

Polygone

  context.beginPath();
  context.fillStyle = "#00b33c";
  context.moveTo(10, 10);
  context.lineTo(150, 380);
  context.lineTo(280, 10);
  context.closePath();
  context.fill();
HTML5 Canvas | John Samuel
27

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();
HTML5 Canvas | John Samuel
28

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();

HTML5 Canvas | John Samuel
29

Effacer une zone

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

HTML5 Canvas | John Samuel
30

Texte

  context.font = "40px Arial";
  context.strokeText("Bonjour!", 100, 100);
HTML5 Canvas | John Samuel
31

Texte

  context.font = "40px Arial";
  context.fillText("Bonjour!", 100, 100);
HTML5 Canvas | John Samuel
32

Texte

  context.font = "40px Arial";
  context.strokeText("Bonjour!", 100, 100);
HTML5 Canvas | John Samuel
33

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);

HTML5 Canvas | John Samuel
34

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);
HTML5 Canvas | John Samuel
35

Images

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.drawImage(img, 0, 0);
}
HTML5 Canvas | John Samuel
36

Images: Mise à l'échelle

 var img = new Image();
 img.src = "img.png";
 img.onload = function() {
  context.drawImage(img, 0, 0, 500, 400);
}
HTML5 Canvas | John Samuel
37

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);
}
HTML5 Canvas | John Samuel
38

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);
}
HTML5 Canvas | John Samuel
39

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);
}
HTML5 Canvas | John Samuel
40

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);
}
HTML5 Canvas | John Samuel
41

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);
}
HTML5 Canvas | John Samuel
42

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);
}
HTML5 Canvas | John Samuel
43

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
  }
 }
HTML5 Canvas | John Samuel
44

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;
}
HTML5 Canvas | John Samuel
45

Interaction: Souris

document.body.onmouseup = function(event) {
  event = event || window.event;
  event.preventDefault();
}
HTML5 Canvas | John Samuel
46

HTML5 Canvas

Références

Crédits d'images

HTML5 Canvas | John Samuel
47