2017年4月26日
Create.js实战-绘制图形操作
大家好,今天跟大家分享createjs的绘制图形的操作,官方链接入口:http://www.createjs.cc/src/docs/easeljs/classes/Graphics.html
Graphics Class
图形类公开了一个易于使用的接口,用于生成矢量绘图指令,并将其绘制到指定的上下文中。
有2种方法来处理图形对象:一个图形实例的调用方法(这个 “Graphics API”),或以图形命令对象并将它们添加到队列通过图形 append. 前者是后者,简化了开始和结束路径,填充和笔画。
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#000000");
g.beginFill("red");
g.drawCircle(0,0,30);
官方的案例看起来没有那么清楚,接下来我把自己的代码搞上来,
首先引入代码
//createjs库
<script>
var stage = new createjs.Stage("gameView");
var Rect = new createjs.Shape();
//创建图形容器
Rect.graphics.beginFill("#ff0000");
//填充颜色
Rect.graphics.drawRect(5,5,50,50);
//绘制矩形
stage.addChild(Rect);
//添加到容器
stage.update();
//更新
</script>
