Discussion :

[Jean rené]

Bonjour,
Débutant en HTML5, j'ai écrit, avec beaucoup de patience, le code ci-dessous sur Animate HTML5 canvas afin de réaliser un graphique infini style "enregistrement d'un séisme". Le tracé doit se faire à partir d'un point qui indique l'ordonnée des points du graphique et celui-ci doit se déplacer vers la gauche. Après de très nombreuses recherches, je ne parviens pas à créer le défilement. Un grand merci à tous ceux qui pourront m'aider.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
var mousePos = { x:800, y:50 };
 
createjs.Tween.get(mousePos)
.to({x:800, y: 100}, 2000)
.wait(200)
.to({x:800, y: 150}, 2000)
.wait(200)
.to ({x:800, y: 200}, 2000)
 
function draw ()
{
	ctx.lineTo(mousePos.x ,mousePos.y );
	ctx.stroke();
}
 
ctx.beginPath();
ctx.strokeStyle = '#ff0000'; 
ctx.lineWidth = 2;
 
createjs.Ticker.addEventListener("tick", tick1.bind(this));
function tick1()
{
	draw();
};
 
tick1();
ctx.moveTo(mousePos.x,mousePos.y);

[NoSmoking]

Bonjour,
as-tu été regarder Animations basiques sur MDN, une bonne introduction aux méthodes.

Tu peux également te tourner vers des bibliothèques « graphique » comme Chart.js par exemple, ce n'est pas la seule loin de là !

[Jean rené]

Bonjour,
J'ai regardé dans MDN mais rien ne correspond à ce que je cherche. En fait, il faudrait que je puisse dessiner dans une fenêtre (un rectangle). Il est ensuite très facile de faire varier la position du rectangle lorsque le graphique est en train de se créer. EN AS2, j'utilisais createEmptyMovieClip mais il ne semble pas y avoir d'équivalent en HTML5 canvas. Merci pour la réponse. D'autres idées ?

[NoSmoking]

Il faut voir le <canvas> comme une ardoise et sur laquelle il faut effacer ce qui est présent puis redessiner à chaque fois, cela peut être soulant mais souvent optimisable.

A voir quel est vraiment ton besoin.

[Jean rené]

J’ai une solution avec la bibliothèque CreateJs sur animate en utilisant le constructeur de classe var shape = new createjs.Shape();
Cela remplace createEmptyMovieClip.

Je suis en train de régler le dernier problème avec moveTo et lineTo qui ne trace pas ce que je veux : j’obtiens des pointillés.
Voilà le code. Si tu as une idée pour mes pointillés ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
app = this;
var myPoint = {x:400, y:100}
 
createjs.Tween.get(myPoint,{loop: -1})
.to({x:400, y: 100}, 1000)
.wait(200)
.to({x:400, y: 150}, 1000)
.wait(200)
.to ({x:400, y: 100}, 1000)
.wait (200)
 
var A;
var B;
var C;
var D;
var E;
 
var shape = new createjs.Shape();
shape.graphics.beginStroke("#000000");
 
createjs.Ticker.addEventListener("tick", tick.bind(this));
function tick()
{
A = myPoint.x;
B = myPoint.y;
C = shape.x;
D = A - C;
E = D + 1;
shape.graphics.beginStroke("#000000");
shape.graphics.moveTo( D, B );
shape.graphics.lineTo( E, B );
shape.graphics.endStroke();
app.addChild(shape);
shape.x+= +0.51;
};

[Jean rené]

Problème réglé. Il fallait sortir le moveTo de la boucle ticker et supprimer le endStroke.