createJs学习之Graphics 类

[fredshare]

createJS之EaselJS教程之1--Graphics 类

Graphics类作用于创建并绘制到网页具体位置的矢量图形。比如你可以通过使用Graphics类中的draw方法绘制图形，然后使用Shap对象轻松地将矢量图形放置到指定的canvas之中。

举例

var g = new createjs.Graphics();        //实例化一个Graphics类
g.setStrokeStyle(1);    //1像素的画笔
g.beginStroke(createjs.Graphics.getRGB(0,0,0)); 
//等同于g.beginStroke('#f00');画边
g.beginFill(createjs.Graphics.getRGB(255,0,0));     //用红色填充图形
g.drawCircle(0,0,50); //画一个半径是50的圆

var s = new createjs.Shape(g);  //将圆实例成一个shape
    s.x = 100;  //横坐标为100
    s.y = 100;  //纵坐标为100
stage.addChild(s);
stage.update();     //update把stage的改动更新到canvas里

Graphics类里的所有绘图方法都会返回一个graphics实例，因此可以使用链式操作。下面这段代码能够绘制出红边蓝色填充的矩形，并放置到指定的context2D中。

var canvas = document.getElementById("demoCanvas");
var cxt = canvas.getContext("2d");
var myGraphics = new createjs.Graphics();
myGraphics.beginStroke("#F00").beginFill("#00F").drawRect(20, 20, 100, 50).draw(cxt);

Graphics类支持简写方法，官方称为tiny api：

Tiny	Method	Tiny	Method
mt	moveTo	lt	lineTo
a/at	arc / arcTo	bt	bezierCurveTo
qt	quadraticCurveTo (also curveTo)	r	rect
cp	closePath	c	clear
f	beginFill	lf	beginLinearGradientFill
rf	beginRadialGradientFill	bf	beginBitmapFill
ef	endFill	ss	setStrokeStyle
s	beginStroke	ls	beginLinearGradientStroke
rs	beginRadialGradientStroke	bs	beginBitmapStroke
es	endStroke	dr	drawRect
rr	drawRoundRect	rc	drawRoundRectComplex
dc	drawCircle	de	drawEllipse
dp	drawPolyStar	p	decodePath

使用简写方法，刚刚那个链式操作的代码可以更简化一下：

var canvas = document.getElementById("demoCanvas");
var cxt = canvas.getContext("2d");
var myGraphics = new createjs.Graphics();
myGraphics.s("#F00").f("#00F").r(20, 20, 100, 50).draw(myContext2D);

[baober]

• [x] Read