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>