HTML5 CreateJs-EasyJs Stage以及 container的应用

最新推荐文章于 2022-05-17 14:37:17 发布

GitHub轮子工厂

最新推荐文章于 2022-05-17 14:37:17 发布

阅读量1.7k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/lzp492782442/article/details/42113369

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

 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();

GitHub轮子工厂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"
复制链接

扫一扫