HTML5 Canvas

John Samuel
CPE Lyon

Année: 2018-2019
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

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

HTML5 Canvas | John Samuel
6

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
7

Fonctionnement

Dans le body d'un fichier HTML

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

HTML5 Canvas | John Samuel
8

Fonctionnement

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

 <script>
  var id = document.getElementById("moncanvas");
  var context = id.getContext("2d");
 </script>
HTML5 Canvas | John Samuel
9

Fonctionnement

Changer la couleur du fond

  id.style.backgroundColor = "green";

HTML5 Canvas | John Samuel
10

Fonctionnement

Changer l'hauteur et la largeur d'un canvas

  var id = document.getElementById("moncanvas");
  id.setAttribute("width", 500);
  id.setAttribute("height", 600);

HTML5 Canvas | John Samuel
11

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

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
13

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

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
15

Ligne

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

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
17

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
18

Arc

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

Arc

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

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
21

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
22

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
23

Arc

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

Courbe

Courbe de Bézier quadratique

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

Courbe

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

Courbe

Courbe de Bézier cubique

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

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
28

Cercle

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

Rectangle

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

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
31

Rectangle

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

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
33

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
34

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
35

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
36

Effacer une zone

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

HTML5 Canvas | John Samuel
37

Texte

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

Texte

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

Texte

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

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
41

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
42

Images

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

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
44

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

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
46

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
47

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
48

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
49

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
50

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
51

Interaction: Clavier

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

  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
52

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
53

Interaction: Souris

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

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 | John Samuel
55

SVG

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                  ...
                  </svg>
HTML5 Canvas | John Samuel
56

SVG: Rectangle

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <rect height=200 width=200 fill="green">
                  </svg>
HTML5 Canvas | John Samuel
57

SVG: Cercle

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <circle cx=100 cy=100 r=50 fill="red">
                  </svg>
HTML5 Canvas | John Samuel
58

SVG: Ellipse

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <ellipse cx=100 cy=100 rx=80 ry=40 fill="red">
                  </svg>
HTML5 Canvas | John Samuel
59

SVG: Lignes

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <line x1=0 y1=0 x2=200 y2=200 stroke="red" stroke-width=10>
                  </svg>
HTML5 Canvas | John Samuel
60

SVG: Polylignes

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <polyline points="30 30 180 180 30 180"
                       fill="none"
                       stroke="red" stroke-width=10 />
                  </svg>
HTML5 Canvas | John Samuel
61

SVG: Polygon

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <polygon points="30 30 180 180 30 180"
                       fill="none"
                       stroke="red" stroke-width=10 />
                  </svg>
HTML5 Canvas | John Samuel
62

SVG: Chemin

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <path d="M30 30 L 180 180 L 30 180"
                       fill="none"
                       stroke="red" stroke-width=10 />
                  </svg>
HTML5 Canvas | John Samuel
63

SVG: Textes

Bonjour 
                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <text x="40" y="40"
                           stroke="red" fill="red">
                           Bonjour</text>
                  </svg>
HTML5 Canvas | John Samuel
64

SVG: Textes et Chemin

Bonjour le Monde! Canvas 
                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <path d="M30 30 L 180 180 L 30 180"
                       fill="transparent"
                       id="tpath"
                       stroke-width=10 />
                     <text stroke="red" fill="red">
                       <textPath xmlns:xlink="http://www.w3.org/1999/xlink"
                                 xlink:href="#tpath">
                          Bonjour le Monde! Canvas
                       </textPath>
                     </text>
                  </svg>
HTML5 Canvas | John Samuel
65

HTML5 Canvas

Références

Crédits d'images

HTML5 Canvas | John Samuel
66