HTML5 Canvas

John Samuel
CPE Lyon

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

Creative Commons License

HTML5 Canvas

Objectifs

HTML5 Canvas

Histoire

Fonctionnement

canvas

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

Fonctionnement

canvas

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

Fonctionnement

canvas

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

Fonctionnement

getContext(...)

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

Fonctionnement

canvas

Dans le body d'un fichier HTML

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

Fonctionnement

canvas

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

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

Fonctionnement

style.backgroundColor

Changer la couleur du fond

  id.style.backgroundColor = "green";

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

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

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>

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

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>

Ligne

beginPath()

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

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

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

Arc

arc(...)

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

Arc

arc(...)

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

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.

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

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

Arc

arcTo(...)

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

Exemple

  context.arcTo(350, y, 710, 20, 150);

Courbe

Courbe de Bézier quadratique

quadraticCurveTo(...)

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

Courbe

quadraticCurveTo(...)

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

Courbe

Courbe de Bézier quadratique

quadraticCurveTo(...)

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

Courbe

Courbe de Bézier cubique

bezierCurveTo(...)

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

Courbe

bezierCurveTo(...)

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

Courbe

Courbe de Bézier cubique

bezierCurveTo(...)

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

Cercle

Cercle en utilisant arc(...)

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

Ellipse

ellipse(...)

  context.beginPath();
  context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
  context.stroke();

Ellipse

ellipse(...)

  context.beginPath();
  context.ellipse(150, 180, 100, 150, Math.PI/4, 0, 2 * Math.PI);
  context.stroke();

Rectangle

rect(...)

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

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

Rectangle

fillRect(...)

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

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

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

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

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

Effacer une zone

clearRect()

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

Texte

strokeText()

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

Texte

fillText()

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

Texte

strokeText()

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

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

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

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

Images

drawImage()

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

Images: Mise à l'échelle

drawImage()

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

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

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

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

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

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

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

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

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

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

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

Interaction: Souris

onmouseup

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

SVG

svg

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                  ...
                  </svg>
                  

SVG: Rectangle

rect

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <rect height=200 width=200 fill="green">
                  </svg>
                  

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>
                  

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>
                  

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>
                  

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>
                  

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>
                  

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>
                  

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>
                  

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>
                  

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

Références

Crédits d'images