Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Balise canvas
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Balise canvas

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 5346
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Balise canvas
    Envoyé : Jun 26 2020 à 7:19pm
Un petit tuto sur la façon d'intégrer une animation dans une balise canvas

On part du principe que vous avez un générateur d'animations de type canvas.

Pour cet exercice je me suis servi de l'exemple d'horloge fourni ici: https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques

Étape 1

Ajouter un bloc de code visuel à votre page dans lequel vous insérerez la balise:

<canvas id="canvas" width="150" height="150"></canvas>

Notez que la balise a un id et des dimensions.  Il vaut mieux que le bloc de code ait les mêmes dimensions

Étape 2

Ajouter un bloc de code de type javascript en position EndBody et insérez le code de l'animation.  Notez que l'id du canvas y est utilisée.  

function clock(){
  var now = new Date();
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0,0,150,150);
  ctx.translate(75,75);
  ctx.scale(0.4,0.4);
  ctx.rotate(-Math.PI/2);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "white";
  ctx.lineWidth = 8;
  ctx.lineCap = "round";

  // Marquage des heures
  ctx.save();
  for (var i=0;i<12;i++){
    ctx.beginPath();
    ctx.rotate(Math.PI/6);
    ctx.moveTo(100,0);
    ctx.lineTo(120,0);
    ctx.stroke();
  }
  ctx.restore();

  // Marquage des minutes
  ctx.save();
  ctx.lineWidth = 5;
  for (i=0;i<60;i++){
    if (i%5!=0) {
      ctx.beginPath();
      ctx.moveTo(117,0);
      ctx.lineTo(120,0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI/30);
  }
  ctx.restore();
 
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr>=12 ? hr-12 : hr;

  ctx.fillStyle = "black";

  // Aiguille des heures
  ctx.save();
  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
  ctx.lineWidth = 14;
  ctx.beginPath();
  ctx.moveTo(-20,0);
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

  // Aiguille des minutes
  ctx.save();
  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(-28,0);
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();
 
  // Aiguille des secondes
  ctx.save();
  ctx.rotate(sec * Math.PI/30);
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-30,0);
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0,0,10,0,Math.PI*2,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(95,0,10,0,Math.PI*2,true);
  ctx.stroke();
  ctx.fillStyle = "rgba(0,0,0,0)";
  ctx.arc(0,0,3,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore();

  ctx.beginPath();
  ctx.lineWidth = 14;
  ctx.strokeStyle = '#325FA2';
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();

  ctx.restore();

  window.requestAnimationFrame(clock);
}

window.requestAnimationFrame(clock);

Il faut prendre garde aux noms de variables et aux ID si l'on veut mettre plus d'une animation sur la même page.

Et voilà, le tour est joué.

Edité par Hobby001 - Jun 27 2020 à 7:19pm
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Actif
Points: 9757
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jun 27 2020 à 8:45am
a tester en effet, j'ignorais cet effet; A voir comment l'implanter dans un site en effet. Bravo Hobby001 !
Haut de la page
Ribol allez vers le bas
Newbie
Newbie


Depuis le: Jun 21 2015
Status: Inactif
Points: 21
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Ribol Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jun 27 2020 à 5:02pm
Bonjour,
Un grand merci pour ce travail. Lorsque mon premier swf sera converti, j’essaierai et je vous dirai.
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,027 secondes.
Acheter votre vélo en ligne