Problème avec le language JavaSript
DpNdb76
Messages postés
6
Date d'inscription
Statut
Membre
Dernière intervention
-
Ltfx -
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.
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.
A voir également:
- Problème avec le language JavaSript
- Language binaire - Guide
- Windows display language french - Guide
- Vistalizator language pack windows 7 - Télécharger - Traduction
- Autocad 2008 language pack french - Forum AutoCAD
- Photoshop cs6 french language pack - Forum Photoshop
2 réponses
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
je te conseille de te renseigner par toi meme via google.
sinon
soit plus précis pour tes demandes.
bonne journée
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()