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>