Trail scrolling in a fixed window in HTML5

Explorer ,
Oct 08, 2020

Copy link to clipboard

Copied

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)

TOPICS
Code

Views

59

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Have something to add?

Join the conversation