Skip to main content
Inspiring
October 8, 2020
Question

Trail scrolling in a fixed window in HTML5

  • October 8, 2020
  • 0 replies
  • 206 views

Hello,
I have the following code to draw a line from a drawn clip called my_circle. I would like the line to be drawn in a window of fixed size (L = 500, H = 250) and that the content of this window moves to the left in order to make a sinusoid-shaped line appear, like a heart rate recording would. I managed to do this in AS2 with a mask and a "createEmptyMovieClip". I've been looking for many hours and I can't find it. Would you please have a solution in HTML5?

 

this.my_circle.x = 800;
this.my_circle.y = 100;

createjs.Tween.get(this.my_circle, {loop: -1})
.to({x:800, y: 200}, 2000)
.wait(200)
.to({x:800, y: 100}, 2000)

var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;

createjs.Ticker.addEventListener("tick", tick1.bind(this));
function tick1()
{
var pmj = this.globalToLocal(this.my_circle.x,this.my_circle.y);
posXu = pmj.x;
posYu = pmj.y;

ctx.lineTo(posXu,posYu);
ctx.stroke();
};

tick1();
ctx.moveTo(posXu,posYu );


Thank you for any answer.

Translated with www.DeepL.com/Translator (free version)

This topic has been closed for replies.