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);