AFmika
Messages postés25Date d'inscriptionmardi 14 juillet 2015StatutMembreDernière intervention24 juin 2016 15 sept. 2015 à 23:18
Merci pour les astuces. Je suis debutant et c'est l'un de mes tout premiers scripts. Pour tout te dire je venais de decouvrir canvas et je voulais faire un truc que quelqu'un semble ne pas avoir encore fait alors voila... :) en passant ... j'avoue l
existence de certaines erreurs et trucs inutiles comme la ligne se repetant a chaque fois...
@karamel
Messages postés1855Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention18 avril 2024153 Modifié par kazma le 14/09/2015 à 15:41
bonjour
le script est une bonne base de départ mais il y a des chose qui peuvent être changé comme la création des point qui passent par un rectangle alors que le faire avec une ligne est plus simple de même que le 0.001 qui force a faire trop de calcules inutilement. il y a aussi la création des ligne de repéré qui est répété inutilement pour ça il suffit de créer une fonction qui est lancé au chargement de la page et qui crée un seul fois ces lignes et enfin quand tu cree une boucle pour l'incrémentation tu utilise la variable i sans le mot vartu cree donc une variable globale pour ce script c'est pas grave mais dans d'autres cas sa peut causer des problèmes
voici des modifs afin de rendre le script fluide
function init_c(){
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext('2d')
var dx = canvas.width
var dy = canvas.height
//Les droites constituant notre sous repère
ctx.beginPath();
ctx.moveTo(dx, (dy/2)+4); // on place le stylo au point A(dx,dy/2+(réel d'ajustement))
ctx.lineTo(0,(dy/2)+4); // première droite
ctx.moveTo(dx/2 , 0 );
ctx.lineTo( dx/2 , dy); // deuxième droite
ctx.lineWidth = 2; // épaisseur du trait
ctx.stroke()
}
function draw_curve(){
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext('2d')
var dx = canvas.width
var dy = canvas.height
/**Centre du canvas(centre du sous repère) x=dx/2 et y = dy/2
-Puisque l'ordonnée 'y' s'inversse on calcule dans le canvas de dimension dx , dy
-Pour tout point M(x',y') sur le canvas, dans le sous repère du canvas OIJ, les coordonnées de M sont :
*Canvas : M(x',y') = dOIJ/dCanvas : M(dx/2 + x' , dy - (y' + dy/2))
**/
//On va débuter ici le tracé de la courbe en fonction de la fonction entrée
var k = document.getElementById("echelle").value //Echelle réel à k ~ 20
ctx.beginPath();
for( var i= -dx ; i < dx ; i+=0.1 ){ //On associe 'i' réels à f(x) prédéfini dans la dimension du canvas pour construire des points
var x = dx/2 + k*i
var y = dy - (k*f(i) + dy/2)
ctx.lineTo(x , y);
}
ctx.strokeStyle='red'
ctx.lineWidth = 2;
ctx.stroke()
}
window.addEventListener("load", init_c, false);
sa rend le script plus long mais l'objectif n'est pas d'avoir le script le plus court a tout prix.
sinon j'aime bien le coté simple et efficace c'est un truc qui demande a être amélioré par l'ajout d'options.
15 sept. 2015 à 23:18
existence de certaines erreurs et trucs inutiles comme la ligne se repetant a chaque fois...
Modifié par kazma le 14/09/2015 à 15:41
le script est une bonne base de départ mais il y a des chose qui peuvent être changé comme la création des point qui passent par un rectangle alors que le faire avec une ligne est plus simple de même que le 0.001 qui force a faire trop de calcules inutilement. il y a aussi la création des ligne de repéré qui est répété inutilement pour ça il suffit de créer une fonction qui est lancé au chargement de la page et qui crée un seul fois ces lignes et enfin quand tu cree une boucle pour l'incrémentation tu utilise la variable i sans le mot var tu cree donc une variable globale pour ce script c'est pas grave mais dans d'autres cas sa peut causer des problèmes
voici des modifs afin de rendre le script fluide
sa rend le script plus long mais l'objectif n'est pas d'avoir le script le plus court a tout prix.
sinon j'aime bien le coté simple et efficace c'est un truc qui demande a être amélioré par l'ajout d'options.