Problème avec le language JavaSript

Fermé
DpNdb76 Messages postés 6 Date d'inscription jeudi 1 mai 2014 Statut Membre Dernière intervention 28 mai 2014 - 28 mai 2014 à 17:40
 Ltfx - 10 juin 2014 à 22:36
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 samedi 26 juillet 2008 Statut Membre Dernière intervention 23 octobre 2018 34
31 mai 2014 à 20:58
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
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
Merci beaucoup c'est très gentil, je vais le regarder et comprendre mieux :)
0
je viens de voir aussi que tu as déclaré 2 fois la function mouseDown
0