CreateJS第1章 EaselJS基础（画图）

浏览数：88 / 时间：2015年06月09日

这章学学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);

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CreateJS第1章 EaselJS基础（画图）