EaselJS Graphics Beispiele

Die folgenden Beispiele sollten einem Shape Objekt zugewiesen werden. Verschiedene Möglichkeite werden in meinen Flash CC Canvas, Graphics Tipp vorgestellt. Eine mögliche Lösung ist folgende.

var g = new createjs.Graphics().beginFill("rgba(255,255,255,1)").drawRoundRect(0,0, 120, 120, 5);
var myShape = new createjs.Shape(g);
this.addChild(myShape);

//drawRect();
new createjs.Graphics().beginFill("rgba(100, 65, 90,1)").rect(5,5,80,80);



//drawRoundRect();
new createjs.Graphics().beginFill("rgba(100, 65, 90,1)").drawRoundRect(0,0, 120, 120, 5);


//beginLinearGradientFill() with drawRoundRect();  
new createjs.Graphics().beginLinearGradientFill(["rgba(100, 65, 90,1)", "rgba(0,0,0,1)"], [0,1],0,0,0,130).drawRoundRect(0,0, 120, 120, 5);


//drawCircle();  
new createjs.Graphics().beginFill("rgba(100, 65, 90,1)").drawCircle(40,40,40);



//beginRadialGradientFill() with drawCircle();  
new createjs.Graphics().beginRadialGradientFill(["rgba(100, 65, 90,1)","rgba(0,0,0,1)"],[0,1],0,0,0,0,0,60).drawCircle(40,40,40);



//drawEllipse();  
new createjs.Graphics().beginFill("rgba(100, 65, 90,1)").drawEllipse(5,5,60,120);



//Draw Hexagon using drawPolyStar();  
new createjs.Graphics().beginFill("rgba(100, 65, 90,1)").drawPolyStar(60,60,60,6,0,45);



//Draw a star using drawPolyStar();  
new createjs.Graphics().beginFill("rgba(100, 65, 90,1)").drawPolyStar(80,80,70,5,0.6,-90);



//beginBitmapStroke() with drawRect();  
new createjs.Graphics().setStrokeStyle(25).beginBitmapStroke(img).rect(5,5,100,100);


//drawRoundRectComplex();  
new createjs.Graphics().beginFill("rgba(100, 65, 90,1)").drawRoundRectComplex(5,5,70,70,5,10,15,25);



//drawCircle(); with beginBitmapFill();  
new createjs.Graphics().beginStroke("rgba(100, 65, 90,1)").beginBitmapFill(img).drawCircle(30,30,30).endStroke();


//Mask  var shape = new createjs.Shape();  
shape.graphics = new createjs.Graphics().beginStroke("rgba(100, 65, 90,1)").beginBitmapFill(img).drawCircle(35,25,20).endStroke();  
var image = new createjs.Bitmap(img);  image.mask = shape;    
stage.addChild(image);



//lineTo();  
new createjs.Graphics().beginStroke("rgba(100, 65, 90,1)").moveTo(5, 35).lineTo(110,75).endStroke();



//arcTo();  
new createjs.Graphics().beginStroke("rgba(100, 65, 90,1)").moveTo(50,20).arcTo(150,20,150,70,50).endStroke();



//quadraticCurveTo();  
new createjs.Graphics().beginStroke("rgba(100, 65, 90,1)").moveTo(0, 25).quadraticCurveTo(45,50,35,25).endStroke();



//bezierCurveTo();  
new createjs.Graphics().beginStroke("rgba(100, 65, 90,1)").moveTo(5, 75).bezierCurveTo(45,90,75,75,-25,-25).endStroke();