[canvas] Déplacer un objet suivant une droite
salut les pros
j'ai un soucis bien sûr ;)
Je lance après chargement de la page html l'instruction setInterval qui démarre la fonction Ma_voiture().
Et la fonction Ma_voiture() efface le CANVAS et dessine un sprite sur le canvas par le contexte ctx2.
Le dessin se fait bien et maintenant traverse l'écran vers la gauche horizontalement, mais moi je voudrais qu'il suive une droite allant de sa position "milieu du bord haut" vers la position "milieu du bord gauche" et continue jusqu'à se cacher derrière l'écran vers la gauche.
C'est la variable x1,y1 qui déplace le dessin vers la gauche grâce à x1-=2 puis y est calculé par la formule pour suivre la pente de la droite, sauf que cela ne marche pas, il va vers la gauche à l'horizontale.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
var w=100;
var h=50;
var x1=380;
var y1=75;
var x2=-200;
var y2=300;
var B=y1-(pente * x1);
var pente=(y2-y1)/(x2-x1);
var x=-200;
var y=0;
function Ma_voiture(){
// Efface le rectangle du dessin sur le canvas.
ctx2.clearRect(x1,y1,w,h);
// Dessine le dessin sur le Canvas, position x1,y1 avec largeur w et hauteur h.
ctx2.drawImage(vaiss1,x1,y1,w,h);
// Change la position x1 vers la gauche.
x1+=-3;
// Calcule y1 pour la nouvelle valeur de x1 afin de suivre la pente de la droite mathématique.
pente=(y2-y1)/(x2-x1);
B=y1-(pente * x1);
y=B+(x1 * pente);
y1=y;
}
// Appelle le dessin toutes les 16 milli-secondes.
var interval=setInterval(Ma_voiture,16); |
La formule de la droite est :
y= (pente * x1) - B
Selon un site de mathématiques (Allo...) le calcul de y se fait de cette façon :
Citation:
Quelle est l’équation de la droite ayant une pente de 3,5 et qui passe par le point (−6,−28) ?
Étape 1 : On écrit l’équation de la droite en remplaçant m par 3,5.
y=3,5x+b
Étape 2 : À l’aide du point connu, on remplace :
y par −28
x par −6.
y=3,5x + b
−28=3,5(−6)+b
Étape 3 : On isole le paramètre b :
−28=3,5(−6)+b
−28=−21+b
−28+21=b
−7=b
Étape 4: On écrit l'équation sous sa forme fonctionnelle avec les paramètres :
m=3,5
b=−7.
y=3,5x−7
