• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Trail scrolling in a fixed window in HTML5

Explorer ,
Oct 08, 2020 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

138

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
community guidelines
no replies

Have something to add?

Join the conversation