Problème avec le language JavaSript

DpNdb76 Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -  
 Ltfx -
Bonjour,

Je suis en se moment entrain de créer une page web personnelle, et sur cette page j'ai mis une balise canvas qui m'impose du javas script mais je n'arrive pas a comprendre la signification de chaques termes du java ci-dessous:

var position = {x:0 , y: window.innerHeight/ 0};
var counter = 0;
var minFontSize = 10; ( Je sais que c'est la taille minimum)
var angleDistortion = 0;
var letters = "Amazing, Bonne ambiance, Cool, Studieuse, Drole, Professeurs exceptionnels, Extraordinaire, Mémorable, Parfaite, Génial, Solidaire, Formidable ...";
( la var letters c'est le texte que j'ai choisit)

// Drawing variables
var canvas;
var context;
var mouse = {x:0 , y:0 , down: false} // Ne pas enlever le false

function init() {
canvas = document.getElementById( 'canvas' );
context = canvas.getContext( '2d' );
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mouseout', mouseUp, false);
canvas.addEventListener('dblclick', doubleClick, false);

window.onresize = function(event) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
}

function mouseMove ( event ){
mouse.x = event.pageX;
mouse.y = event.pageY;
draw();
}

function draw() {
if ( mouse.down ) {
var d = distance( position, mouse );
var fontSize = minFontSize + d/2;
var letter = letters[counter];
var stepSize = textWidth( letter, fontSize );

if (d > stepSize) {
var angle = Math.atan2(mouse.y-position.y, mouse.x-position.x);

context.font = fontSize + "px Georgia";

context.save();
context.translate( position.x, position.y);
context.rotate( angle );
context.fillText(letter,0,0);
context.restore();

counter++;
if (counter > letters.length-1) {
counter = 0;
}

//console.log (position.x + Math.cos( angle ) * stepSize)
position.x = position.x + Math.cos(angle) * stepSize;
position.y = position.y + Math.sin(angle) * stepSize;

}
}
}

function distance( pt, pt2 ){

var xs = 0;
var ys = 0;

xs = pt2.x - pt.x;
xs = xs * xs;

ys = pt2.y - pt.y;
ys = ys * ys;

return Math.sqrt( xs + ys );
}

function mouseDown( event ){
mouse.down = true;
position.x = event.pageX;
position.y = event.pageY;

document.getElementById('info').style.display = 'none';
}

function mouseUp( event ){
mouse.down = false;
}

function doubleClick( event ) {
canvas.width = canvas.width;
}

function textWidth( string, size ) {
context.font = size + "px Georgia"; ( je pense que c'est la police)

if ( context.fillText ) {
return context.measureText( string ).width;
} else if ( context.mozDrawText) {
return context.mozMeasureText( string );
}

};

init()

Merci de m'aidez si vous le pouvez, et surtout les termes importants et ceux inutiles, ce java sert à faire apparaître du texte lorsque l'on maintien le clique droit de la souris et qu'on le glisse.

Merci d'avance.

2 réponses

MxM971 Messages postés 244 Date d'inscription   Statut Membre Dernière intervention   36
 
T'expliquer la totalité du code serais trop long.
je te conseille de te renseigner par toi meme via google.

sinon

soit plus précis pour tes demandes.

bonne journée
0
Ltfx
 
j'ai commenté le code si sa peut t'aider








/*

Les VARIABLES 

*/
var counter = 0;  // compteur de lettre ou il en est
var minFontSize = 10; // min taille
var angleDistortion = 0; 

/*
Choix des Letters
*/
var letters = "Amazing, Bonne ambiance, Cool, Studieuse, Drole, Professeurs exceptionnels, Extraordinaire, Mémorable, Parfaite, Génial, Solidaire, Formidable ..."; 
 
// Var CONF CANVAS 
var canvas; 
var context; 

/* JSON récupere les donnés entrer par les function appelés*/
var mouse = {x:0 , y:0 , down: false}


// doit avoir une erreur la division par zero est interdit !!!!!!!!!!!!!
var position = {x:0 , y: window.innerHeight/ 0}; // <----- Why window.innerHeight/ 0


/*
INITIALISATION DU CANVAS
*/
function init() { 
 
 /*
 * Récupère le Handle vers le canvas qui est sur la page
 * c'est à dire la div ou le canvas est à l'intérieur
 * puis lui donne l'attribut 2d ( au canvas )
 */
 canvas = document.getElementById( 'canvas' ); 
 context = canvas.getContext( '2d' ); 
 
 /*
 * Taille du Canvas Qui prend les valeur de la 
 * fenêtre exemple 1024*768 si votre resolution est comme ça
 */
 canvas.width = window.innerWidth; 
 canvas.height = window.innerHeight; 
 
 /*
 * Procedure D'appel 
 * 
 * mousemove -> quand la souris bougera
 * sur le canvas il appelera la function -> mouseMove
 *
 * mousedown -> quand on appuye avec la souris
 * il appelera la function -> mouseDown
 *
 * mouseup   -> quand on relache les button de
 * la sourie il appelera la function -> mouseUp
 *
 * dbClick   -> un doucle click sur le canvas 
 *il appelera la function -> doubleClick
 */
 canvas.addEventListener('mousemove', mouseMove, false); 
 canvas.addEventListener('mousedown', mouseDown, false); 
 canvas.addEventListener('mouseup', mouseUp, false); 
 canvas.addEventListener('mouseout', mouseUp, false); 
 canvas.addEventListener('dblclick', doubleClick, false); 
 
  
 /*
 *  Procedure D'appel en cas de changement
 * de taille de la fenêtre navigateur */
 window.onresize = function(event) { 
  canvas.width = window.innerWidth; 
  canvas.height = window.innerHeight; 
 } 
}
/*
END INIT
*/

/*
Procedure D'appel 
*/
function mouseMove ( event ){ 
 
 /*
 * Récupére positon X -> Left et Y -> Top de la soruis
 */
 mouse.x = event.pageX; 
 mouse.y = event.pageY; 
 
 /*
 * Appel Draw
 */
 draw(); 
} 
function mouseDown( event ){ 
 
 /*
 * IDEM Récupére les position X et Y 
 */
 mouse.down = true; 
 position.x = event.pageX; 
 position.y = event.pageY; 
 
 /*CACHE ELEMENT info*/
 document.getElementById('info').style.display = 'none'; 
} 
function mouseDown( event ){ 
 
 /*
 * IDEM Récupére les position X et Y 
 */
 mouse.down = true; 
 position.x = event.pageX; 
 position.y = event.pageY; 
 
 /*CACHE ELEMENT info*/
 document.getElementById('info').style.display = 'none'; 
} 

function mouseUp( event ){ 
 
 /*FIXE UN FLAG dans JSON mouse*/
 mouse.down = false; 
} 

/*???? ne sert à rien ou peut-être pas */
function doubleClick( event ) { 
canvas.width = canvas.width; 
} 

/*
END
*/

/*
DRAW Permet d'appliquer la lettre
*/
function draw() { 
 
 /*si click down souris*/
 if ( mouse.down ) { 
  
  
  /*
   d est la distance qui va permettre de calculer la taille de la Police dans fontSize 
   letter 
  */
  var d = distance( position, mouse ); 
  var fontSize = minFontSize + d/2; 
  
  /*recupere la lettre*/
  var letter = letters[counter]; 
  
  
  /*
  fix la Taille de la lettre
  */
  var stepSize = textWidth( letter, fontSize ); 
  
  /*
  si la distance et supérieur a la Taille on va Ici sinon FIN
  */
  if (d > stepSize) { 
  
  /*Applique*/
  var angle = Math.atan2(mouse.y-position.y, mouse.x-position.x); 
  context.font = fontSize + "px Georgia"; 
  context.save(); 
  context.translate( position.x, position.y); 
  context.rotate( angle ); 
  context.fillText(letter,0,0); 
  context.restore(); 
  
  /*Lettre suivante*/
  counter++; 
  
  // RAZ counter
  if (counter > letters.length-1) { 
  counter = 0; 
   
   } 
  
  /*
  Update variable
  */
  position.x = position.x + Math.cos(angle) * stepSize; 
  position.y = position.y + Math.sin(angle) * stepSize; 
  } 
 } 
} 

/*
* Calcul la distance entre Deux point A et B
*
* A - B = X 
* X² = x
*
* de meme pour Y
*
* racine de ( X+Y )
*/
function distance( pt, pt2 ){ 
 var xs = 0; 
 var ys = 0; 
 
 xs = pt2.x - pt.x; 
 xs = xs * xs; 
 ys = pt2.y - pt.y; 
 ys = ys * ys;
 
return Math.sqrt( xs + ys ); 
} 

/*
Retourne sa vraie Taille
*/
function textWidth( string, size ) { 
context.font = size + "px Georgia"; 
if ( context.fillText ) { 
return context.measureText( string ).width; 
} else if ( context.mozDrawText) { 
return context.mozMeasureText( string ); 
} 
}; 

/*

APPEL INIT

*/
init() 


0
Dpndb76
 
Merci beaucoup c'est très gentil, je vais le regarder et comprendre mieux :)
0
Ltfx
 
je viens de voir aussi que tu as déclaré 2 fois la function mouseDown
0