Highlighted

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

51

Likes

Translate

Translate

Report

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

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

52

Likes

Translate

Translate

Report

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

Have something to add?

Join the conversation