novembre 6, 2019 / ISN

TP : Javascript et l’élément canvas

1. Préparation du TP1.

  • Créer un dossier TP_js_canvas_1.,
  • ouvrir votre éditeur de code et copier-coller le code HTML ci-dessous :
<!DOCTYPE html>
<html lang="fr" >

<head>
  <meta charset="UTF-8">
  <title>Dessiner et programmer avec canvas_V1</title>
<script  src="index.js"></script>
</head>
<body onload="draw()">
<canvas id="espace_de_dessin" width="400" height="400"></canvas>
</body>

</html>
  • enregistrer ce fichier dans votre répertoire avec le nom « index.html »,
  • dans un nouvel onglet de votre éditeur de code, copier-coller le code ci-dessous :

// on appelle la fonction draw lorsque la page est bien chargée

function draw() {
// on déclare un élément canvas qui correspond à l'élément dont l'id est tutoriel
var canvas = document.getElementById("espace_de_dessin");
// on déclare notre feuille de dessin ctx qui sera une version 2D du canvas
   var ctx = canvas.getContext("2d");

// on déclare une couleur de remplissage
 ctx.fillStyle = "rgb(200,0,0)";
// on ajoute un rectangle à notre feuille de dessin ctx
 ctx.fillRect (10, 10, 55, 50);
// on change la couleur de remplissage avec une opacité de 0.5
 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 // on ajoute un nouveau rectangle;
 ctx.fillRect (30, 30, 55, 50);
 // On dessine un cercle
 ctx.beginPath();
  ctx.fillStyle="green";
  ctx.arc(100, 100, 20, 0, 2 * Math.PI);
  ctx.fill();
// Un demi cercle
ctx.beginPath();
ctx.fillStyle="#FF4422";
ctx.arc(60, 100, 20, 0, -Math.PI);
ctx.fill();
 // dessiner un triangle
 // tracé du triangle
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);
ctx.lineTo(300, 300);
ctx.closePath();
// mise en forme de la bordure
ctx.lineWidth = 10;
ctx.strokeStyle = '#666666';
ctx.stroke();
// remplissage
ctx.fillStyle = "#FFCC00";
ctx.fill();
// un emoji
ctx.beginPath();
  ctx.arc(250, 250, 100,0,Math.PI*2, true);
  ctx.moveTo(235, 225);
  ctx.arc(225, 225, 10, 0, Math.PI*2, true);
  ctx.moveTo(285, 225);
  ctx.arc(275, 225, 10, 0, Math.PI*2, true);
  ctx.moveTo(250, 275);
  ctx.arc(250, 275, 50, 0, Math.PI, false);
  ctx.moveTo(250, 275);
  ctx.lineTo(200, 275);
  ctx.stroke();
  ctx.closePath();
 }
  • enregistrer ce nouveau fichier dans votre répertoire avec le nom « index.js »,
  • ouvrir avec un navigateur votre page html,
  • bravo, vous avez vos premiers dessins réalisés avec l’élément HTML canvas et un programme en javascript.

Exercice 1

  • ajouter un nouveau carré dans votre canvas différent des précédents,
  • supprimer le triangle,
  • modifier votre emoji en le coloriant et en fermant ses yeux,
  • supprimer toutes les formes géométriques et placer votre emoji au centre de votre canvas.

2. Préparation du TP2

  • Créer un dossier TP_js_canvas_2.,
  • ouvrir votre éditeur de code et copier-coller le code HTML ci-dessous :
<!DOCTYPE html>
<html lang="fr" >

<head>
  <meta charset="UTF-8">
  <title>Dessiner et programmer avec canvas_V2</title>
<script  src="index.js"></script>
</head>
<body onload="draw()">
<canvas id="espace_de_dessin" width="400" height="400"></canvas>
</body>

</html>
  • enregistrer ce fichier dans votre répertoire avec le nom « index.html »,
  • dans un nouvel onglet de votre éditeur de code, copier-coller le code ci-dessous :
// on appelle la fonction draw lorsque la page est bien chargée
function draw() {
  
   var canvas = document.getElementById("espace_de_dessin");
   var ctx = canvas.getContext("2d");

// on installe 1 détecteurs d'événements sur l'élément canvas
canvas.addEventListener("mousemove",dessiner_avec_la_souris, false); 



 // si souris est en mouvement
 function dessiner_avec_la_souris(evt){
 // on récupère les coordonnées de la souris dans le canvas
var mousePos = getMousePos(canvas, evt);
// on dessine un cercle plein
ctx.beginPath();
ctx.fillStyle="black";
ctx.arc(mousePos.x, mousePos.y, 15, 0, 2*Math.PI);
ctx.fill();
  }


// fonction qui détermine la position de la souris par rapport à la page et
// par rapport à la position du canvas dans la page
// x et y sont alors les coordonnées de la souris par rapport à l'espace du canvas
function getMousePos(canvas, evt) {
         var rect = canvas.getBoundingClientRect();
         return {
           x: evt.clientX - rect.left,
           y: evt.clientY - rect.top
         };
       }
}
  • enregistrer ce nouveau fichier dans votre répertoire avec le nom « index.js »,
  • ouvrir avec un navigateur votre page html,
  • bravo, vous avez votre première page html interactive : vérifier le en promenant votre souris sur la page.

Exercice 2

  • agrandir votre espace de dessin,
  • changer la couleur, la taille et ne plus remplir le disque qui sert à dessiner.

3. Préparation du TP3

  • Créer un dossier TP_js_canvas_3.,
  • ouvrir votre éditeur de code et copier-coller le code HTML ci-dessous :
<!DOCTYPE html>
<html lang="fr" >

<head>
  <meta charset="UTF-8">
  <title>Dessiner et programmer avec canvas_V3</title>
<script  src="index.js"></script>
</head>
<body onload="draw()">
<canvas id="espace_de_dessin" width="400" height="400"></canvas>
</body>

</html>
  • enregistrer ce fichier dans votre répertoire avec le nom « index.html »,
  • dans un nouvel onglet de votre éditeur de code, copier-coller le code ci-dessous :


function draw() {
  var canvas = document.getElementById("espace_de_dessin");
   var ctx = canvas.getContext("2d");

// on utilise une variable boléenne pour indiquer si le crayon est levé ou non

var dessiner=false;

// une variable qui va gérer le nombre de tour de rotation

var nbre_tour=0;

// on installe 2 détecteurs d'événements sur l'élément canvas

 canvas.addEventListener("mousedown", on_abaisse_le_stylo, false);
 canvas.addEventListener("mousemove", dessiner_avec_la_souris, false);
 

// si l'evenement mousedown est détecté, on abaisse ou on releve le stylo

function on_abaisse_le_stylo(){
// si le stylo était abaissé, on le relève
   if (dessiner==true){
          dessiner=false;
         }
// sinon on l'abaisse
    else{
          dessiner=true;
         }
}

 // si souris est en mouvement

 function dessiner_avec_la_souris(evt){
   // on dessine si le stylo est abaissé
   if (dessiner==true){
   var mousePos = getMousePos(canvas, evt);
   

   nbre_tour=nbre_tour+1;
    // on sauvegarde l'état du dessin
   ctx.save();
   //on translate l'origine du canvas à la position de la souris
ctx.translate(mousePos.x,mousePos.y);
// rotation de la page
   ctx.rotate((Math.PI / 180) * 25*nbre_tour);
// on dessine un carré
   ctx.strokeStyle = '#0095DD';
   ctx.strokeRect(-15, -15, 30, 30);
   ctx.stroke();
       // on restore le canvas à l'état précédent la rotation
   ctx.restore();
   
  }
}

// fonction qui détermine la position de la souris par rapport à la page et
// par rapport à la position du canvas dans la page
// x et y sont alors les coordonnées de la souris par rapport à l'espace du canvas
function getMousePos(canvas, evt) {
         var rect = canvas.getBoundingClientRect();
         return {
           x: evt.clientX - rect.left,
           y: evt.clientY - rect.top
         };
       }
}
  • enregistrer ce nouveau fichier dans votre répertoire avec le nom « index.js »,
  • ouvrir avec un navigateur votre page html,
  • bravo, vous avez votre seconde page html interactive : vérifier le en promenant votre souris sur la page et en cliquant sur le canvas.

Exercice 3

  • agrandir votre espace de dessin,
  • modifier le programme javascript pour l’adapter à vos convenances : couleur, épaisseur, forme , vitesse de rotation …..

CatégoriesISN