CreateEmptyMovieClip HTML5

[mp63178988]

Hello,
Is there a handy HTML5 equivalent of "createEmptyMovieClip" in ActionScript 2? This would allow you to draw with MoveTo and lineTo and make the drawing move.
Thank you for your answer.

[JoãoCésar]

Hi.

In HTML5 Canvas you use the new keyword and the class constructor. Like this:

var shape = new createjs.Shape();
shape.graphics.beginStroke("#000000");
shape.graphics.moveTo(0, 0);
shape.graphics.lineTo(100, 100);
shape.graphics.endStroke();
this.addChild(shape);

It can be an instance from MovieClip, Sprite, Container or any other Display object.

I hope this helps.

Regards,

JC 

[mp63178988]

Thank you very much Mr. JoãoCésar. This is exactly what I needed. So I was able to write the following code but does it show a dotted line ? I've been stuck on this for too long and I need your expertise again. Thanks again.

var myPoint = {x:400, y:100}

createjs.Tween.get(myPoint,{loop: -1})
.to({x:400, y: 100}, 1000)
.wait(200)
.to({x:400, y: 150}, 1000)
.wait(200)
.to ({x:400, y: 100}, 1000)
.wait (200)

var A;
var B;
var C;
var D;
var E;

var shape = new createjs.Shape();
shape.graphics.beginStroke("#000000");

createjs.Ticker.addEventListener("tick", tick.bind(this));
function tick()
{
A = myPoint.x;
B = myPoint.y;
C = shape.x;
D = A - C;
E = D + 1;
shape.graphics.beginStroke("#000000");
shape.graphics.moveTo( D, B );
shape.graphics.lineTo( E, B );
shape.graphics.endStroke();
app.addChild(shape);
shape.x+= +0.51;
};

[mp63178988]

Missing: app = this;

[mp63178988 · Accepted solution]

Problem solved. I removed the moveTo from the ticker and deleted endStroke().