HTML5 Canvas

John Samuel
CPE Lyon

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

canvas

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

HTML5 Canvas | John Samuel
4

Fonctionnement

canvas

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

HTML5 Canvas | John Samuel
5

Fonctionnement

canvas

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

HTML5 Canvas | John Samuel
6

Fonctionnement

getContext(...)

<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

canvas

Dans le body d'un fichier HTML

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

HTML5 Canvas | John Samuel
8

Fonctionnement

canvas

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

style.backgroundColor

Changer la couleur du fond

  id.style.backgroundColor = "green";

HTML5 Canvas | John Samuel
10

Fonctionnement

width, height

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

lineTo(...)

<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

lineTo(...)

 <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

lineTo(...)

<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

beginPath()

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

Lignes

beginPath()

  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

beginPath()

  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

arc(...)

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

Arc

arc(...)

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

Arc

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

arcTo(...)

  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

arcTo(...)

  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

arcTo(...)

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

Exemple

  context.arcTo(350, y, 710, 20, 150);
HTML5 Canvas | John Samuel
24

Courbe

Courbe de Bézier quadratique

quadraticCurveTo(...)

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

Courbe

quadraticCurveTo(...)

  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 quadratique

quadraticCurveTo(...)

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

Courbe

Courbe de Bézier cubique

bezierCurveTo(...)

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

Courbe

bezierCurveTo(...)

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

Courbe

Courbe de Bézier cubique

bezierCurveTo(...)

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

Cercle

Cercle en utilisant arc(...)

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

Ellipse

ellipse(...)

  context.beginPath();
  context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
  context.stroke();
HTML5 Canvas | John Samuel
32

Ellipse

ellipse(...)

  context.beginPath();
  context.ellipse(150, 180, 100, 150, Math.PI/4, 0, 2 * Math.PI);
  context.stroke();
HTML5 Canvas | John Samuel
33

Rectangle

rect(...)

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

Rectangle

rect(...)

  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
35

Rectangle

fillRect(...)

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

Polygone

Polygone en utilisant lineTo()

  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
37

Polygone

Polygone en utilisant lineTo()

  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
38

Polygone

Polygone en utilisant lineTo()

  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
39

Polygone

Polygone en utilisant lineTo()

  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
40

Effacer une zone

clearRect()

  context.clearRect(90, 140, 100, 100);
HTML5 Canvas | John Samuel
41

Texte

strokeText()

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

Texte

fillText()

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

Texte

strokeText()

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

L'alignement du texte

textAlign()

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
45

L'alignement de base

textBaseline()

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
46

Images

drawImage()

context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dLargeur, dHauteur);
context.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);
HTML5 Canvas | John Samuel
47

Images

drawImage()

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

Images: Mise à l'échelle

drawImage()

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

Images: Mise à l'échelle

drawImage(...)

 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
50

Images: Découpage

drawImage(...)

 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
51

Images: Rotation

rotate(...)

 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
52

Images: Mise à l'échelle

scale(...)

 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
53

Image: Déplacement

translate(...)

 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
54

Images: Transformation

transform(...)

 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
55

Interaction: Clavier

keyCode

 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
56

Interaction: Clavier

key

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

  if (event.key === "ArrowLeft") {
   // gauche
  }
  else if (event.key === "ArrowUp") {
   // haut
  }
  else if (event.key === "ArrowRight") {
   // droite
  }
  else if (event.key === "ArrowDown") {
   // bas
  }
 }
HTML5 Canvas | John Samuel
57

Interaction: Souris

pageX, pageY, offsetLeft, offsetTop

 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
58

Interaction: Souris

pageX, pageY, offsetLeft, offsetTop

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

  var posX = event.clientX - canvas.getBoundingClientRect().x;
  var posY = event.clientY - canvas.getBoundingClientRect().y;
}
HTML5 Canvas | John Samuel
59

Interaction: Souris

onmouseup

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

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
61

SVG

svg

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

SVG: Rectangle

rect

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

SVG: Cercle

circle

                  <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
64

SVG: Ellipse

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
65

SVG: Lignes

line

                  <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
66

SVG: Polylignes

polyline

                  <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
67

SVG: Polygon

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
68

SVG: Chemin

path

                  <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
69

SVG: Chemin

path

                  <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
70

SVG: Textes

Bonjour

text

                  <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
71

SVG: Textes et Chemin

Bonjour le Monde! Canvas

textPath

                  <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
72

Média

iframe

HTML5 Canvas | John Samuel
73

Média

iframe

<iframe id="accueil"
  title="accueil"
  width="500"
  height="400"
  src="./index.html">
</iframe>
HTML5 Canvas | John Samuel
74

Média

iframe


View Larger Map
HTML5 Canvas | John Samuel
75

Média

iframe

HTML5 Canvas | John Samuel
76

Média

video

HTML5 Canvas | John Samuel
77

Média

video

<video controls width="250">
  <source src="...ogv"
    type="video/ogg">
  <source src="...mp4"
    type="video/mp4">
      Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.
</video>
HTML5 Canvas | John Samuel
78

Média

audio

HTML5 Canvas | John Samuel
79

Média

audio

<audio
   controls
   src=".wav">
    Votre navigateur ne supporte pas l'élément audio.
</audio>
HTML5 Canvas | John Samuel
80

HTML5 Canvas

Références

HTML5 Canvas | John Samuel
81

HTML5 Canvas

Références

Crédits d'images

HTML5 Canvas | John Samuel
82