Imprimer la Page | Close Window

[Tuto] Balise canvas

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=23903
Date: 03 Dec 2020 à 11:19
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: [Tuto] Balise canvas
Posté par: Hobby001
Sujet: [Tuto] Balise canvas
Posté le: 26 Juin 2020 à 20:19
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" rel="nofollow - 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é.

-------------
https://www.denislafrance.net" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.



Réponses:
Posté par: brolysan
Posté le: 27 Juin 2020 à 09:45
a tester en effet, j'ignorais cet effet; A voir comment l'implanter dans un site en effet. Bravo Hobby001 !

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Ribol
Posté le: 27 Juin 2020 à 18:02
Bonjour,
Un grand merci pour ce travail. Lorsque mon premier swf sera converti, j’essaierai et je vous dirai.



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk