createjs02-easeljs初体验

1.引入createjs库

<script src="https://code.createjs.com/1.0.0/createjs.min.js"> </script>

2.在body 内创建canvas 标签，并设置在body加载完成后在执行init函数

<body onload="init();">
    <canvas id="demoCanvas" width="500" height="300"></canvas>
</body>

3. 在head 或者body 哪个标签写这个init()函数都可以

<script>
    function init() {
      
    }
</script>

4.定义一个舞台实例，并将canvas的id 传进去，这个舞台会保存我们所有的显示对象，并作为项目的可视化的容器

var stage = new createjs.Stage("demoCanvas");

5.创建一个shape，首先我们需要一个shape实例，然后我们可以使用shape 的graphics api 给我们定义的shape 颜色和边界

然后在canvas上设置他的位置，最后将其添加到舞台上

var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

6.最后我们需要将其更新到舞台上，并演示我们刚刚添加的图形

stage.update();

截图如下：

7.完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"> </script>

    <script>
        function init() {
            var stage = new createjs.Stage("demoCanvas");
            var circle = new createjs.Shape();
            circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,50);
            circle.x = 100;
            circle.y = 100;
            stage.addChild(circle);
            stage.update();
        }
    </script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="300"></canvas>
</body>
</html>

createjs02-easeljs初体验

猜你喜欢