HTML5 CreateJs-EasyJs Stage以及 container的应用

这个例子是创建一个舞台，舞台里面添加一个图片。

 var stage = new createjs.Stage("canvasElementId");
 var image = new createjs.Bitmap("imagePath.png");
 stage.addChild(image);
 createjs.Ticker.addEventListener("tick", handleTick);
 function handleTick(event) {
     image.x += 10;
     stage.update();
 }


如果把stage看作一整块画布  那个 container容器 就是画布中的一个块  我们可以在容器中添加东西 ，再把容器添加到舞台中，这样就显得方便很多

-html-

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>container的应用</title>
    <script src="easeljs-0.7.1.min.js"></script>

</head>

<body>

    <canvas id="a" height="400px" width="400px" style="background-color: aquamarine"></canvas>
    <script src="container.js"></script>
</body>
</html>

-js-

var stage  = new createjs.Stage("a");
var contain = new createjs.Container();
stage.addChild(contain);

contain.x=120;
contain.y=120;
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);

var s1 = new createjs.Shape();
s1.graphics.beginFill("#ff0000").drawCircle(110,10,10);

var txt =  new createjs.Text("Hello World", "20px Arial", "#ff7700");
txt.x=130;
contain.addChild(shape);
contain.addChild(s1);
contain.addChild(txt);

stage.update();

HTML5 CreateJs-EasyJs Stage以及 container的应用

猜你喜欢