2017年4月26日

Create.js实战-绘制图形操作

作者 admin

大家好,今天跟大家分享createjs的绘制图形的操作,官方链接入口:http://www.createjs.cc/src/docs/easeljs/classes/Graphics.html

Graphics Class

Defined in: Graphics:41

Module: EaselJS

图形类公开了一个易于使用的接口,用于生成矢量绘图指令,并将其绘制到指定的上下文中。

有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>