CreateJS第1章 EaselJS基础 （画图）
这章学学EaselJS的基本常用API
首先下载createjs库，在项目文件里新建一个js文件夹放里面
http://code.createjs.com/
各种形状
var sp = new createjs.Shape();
sp.graphics.f("red").dc(100,100,80);//画圆
//sp.graphics.beginFill("red").drawCircle(100,100,80);
sp.graphics.f("red").dr(200,10,300,180);//方块
//sp.graphics.beginFill("red").drawRect(200,10,300,180);
sp.graphics.s("blue").ss(5).mt(0,200).lt(1000,200).es();//线
sp.graphics.f("red").rr(10,250,100,110,15);//圆角矩形
sp.graphics.f("red").de(120,250,100,110,15);//椭圆
sp.graphics.f("red").dp(240, 250, 40, 5, 0.6, -90);//星星
var img=new Image();
img.src="http://www.airmn.com/blog/wp-content/uploads/2014/08/jinbi.jpg";
img.onload=function(){
//alert("imgLoadOK!!")
sp.graphics.beginBitmapFill(img);
sp.graphics.drawCircle(400,300,100);
//sp.shadow = new createjs.Shadow("#B1820C",0,0,20);
stage.update();
}
stage.addChild(sp);
综合练习：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/createjs.js" ></script>
</head>
<body>
<canvas id="canvas" width="1000" height="500">你的浏览器太古董了。。。。</canvas>
<script type="text/javascript">
var stage
var hw //画布中间x坐标
var hh //画布中间y坐标
function init(){
stage = new createjs.Stage("canvas");
hw = stage.canvas.width/2;
hh = stage.canvas.height/2;
begin();
stage.update();
}
//开始
function begin(){
var sp = new createjs.Shape();
//背景
sp.graphics.beginFill("rgba(254,241,103,1)").drawCircle(hw,hh,80);
//渐变
sp.graphics.beginLinearGradientFill(["rgba(254,241,103,0.5)","rgba(227,144,2,0.5)"],[0,1],hw,hh-40,hw,hh+40).drawCircle(hw,hh,80);//beginLinearGradientFill最后这几个参数是相对画布的左上角
//外环
sp.graphics.setStrokeStyle(15).beginStroke("#FFF164").drawCircle(hw,hh,80);
sp.shadow = new createjs.Shadow("#B1820C",0,0,20);
//符号
var tt = new createjs.Text("$","100px Arial","#FFF164");
tt.x=hw-27;
tt.y=hh-55;
tt.shadow = new createjs.Shadow("#B1820C",0,0,10)
stage.addChild(sp);
stage.addChild(tt);
}
init()
</script>
</body>
</html>
其中对Graphics的操作可以简写
| 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 |
sp.graphics.beginLinearGradientFill(["rgba(254,241,103,0.5)","rgba(227,144,2,0.5)"],[0,1],hw,hh-40,hw,hh+40).drawCircle(hw,hh,80); 等于 sp.graphics.lf(["rgba(254,241,103,0.5)","rgba(227,144,2,0.5)"],[0,1],hw,hh-40,hw,hh+40).dc(hw,hh,80);