EaselJS简明教程1-绘图

最新推荐文章于 2023-07-16 14:00:56 发布

whqet

最新推荐文章于 2023-07-16 14:00:56 发布

阅读量1w

点赞数 7

分类专栏： html5 canvas&svg javascript 文章标签： canvas html5 js CreateJS

本文链接：https://blog.csdn.net/whqet/article/details/19154653

版权

学习笔记同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

技术总结

59 篇文章 0 订阅

订阅专栏

javascript

38 篇文章 0 订阅

订阅专栏

系列教程目录

EaselJS简明教程1-绘图

EaselJS简明教程2-动画

1.引言

EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。

大家可以到官方网站了解js库的最新进展，也可以使用官方的DEMO和教程进行学习。

为了便于大家学习，结合官方教程和官方DEMO我们来写一个简明教程，主要是对自己的学习做个梳理，也希望对大家有所帮助。好的小伙伴们，我们开工吧。

2.准备工作

搭好台子好唱戏，我们首先把html文档弄好，然后在里面来体验EaselJS。

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script>
        function init() {
            // code here.
        }
    </script>
</head>
<body onLoad="init();">
    <canvas id="demoCanvas" width="500" height="300">
        alternate content
    </canvas>
</body>
</html>

在html里我们弄一个canvas作为我们的演武场，head里面引入EaselJS库，然后再来写我们的代码。

引入EaselJS库可以有这么几种方式：

导入你下载到本地的EaselJS库
在线导入CreateJS CDN里的文件，这样做有个好处，我们可以实现跨用户的缓存，但是CDN里只提供稳定的版本。
单独导入没有编译的文件（在/src文件夹里）

第五行的空的init函数将在页面onload时加载，我们接下来在init里继续我们的内容，我们在canvas中新建一个stage对象。createjs不愧是adobe主导开发的，这个stage让人立刻想到了Flash。

var stage = new createjs.Stage("demoCanvas");

这行代码将新建一个stage对象，并且把它放在canvas里，所有的显示对象都要放在stage里，参数可以是canvas的id或者canvas对象。

这里的Stage类，是EaselJS里的顶级显示对象类，拥有类似AS里的显示对象的方法，比如addChild，addChildAt，getChildAt等方法，详细内容参见官方文档。

3.绘图

接下去我们来画个圆，并且把它添加到stage

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

然后，我们调用Stage类的update方法，把stage的改动更新到canvas里。

stage.update();

这样我们就完成了，最简单的画圆操作，大家可以看看 DEMO。

绘图操作利用Graphics类实现，我们来仔细的研究研究Graphics类。

3.1Graphics类

Graphics类有两个比较有意思的特性，链式操作和简写方法。

链式操作。因为Graphics类里的所有绘图方法都会返回一个graphics实例，因此可以使用链式操作。

myGraphics.beginStroke("#F00").beginFill("#00F").drawRect(20, 20, 100, 50).draw(myContext2D);

这行代码将绘制一个蓝色填充、红色描边的矩形，并且将它渲染到相应的 context2D里。

简写方法（官方文档叫做“Tiny API”）。所有的简写方法都被定义成了protected方法，在创建压缩文档时很有用。

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

使用简写方法，刚刚那个链式操作的代码可以更新为，简化了很多。

 myGraphics.s("#F00").f("#00F").r(20, 20, 100, 50).draw(myContext2D);

3.2 实例-绘制笑脸

  var stage=new createjs.Stage("demoCanvas");
  //绘制圆形
  var circle=new createjs.Shape();
  circle.graphics.f("#f00").dc(0,0,100).ef();
  circle.x=500;
  circle.y=240;
  stage.addChild(circle);
  
  //绘制眼睛
  var eye=new createjs.Shape();
  eye.graphics.f("rgba(0,0,20,.5)").de(0,0,20,40).ef;
  eye.x=450;
  eye.y=180;
  stage.addChild(eye);
  
  var eye2=new createjs.Shape();
  eye2.graphics=eye.graphics.clone();
  eye2.x=530;
  eye2.y=180;
  stage.addChild(eye2);
  
  //绘制鼻子
  var nose=new createjs.Shape();
  nose.graphics.f("rgba(0,0,20,.5)").dc(0,0,10).ef;
  nose.x=500;
  nose.y=250;
  stage.addChild(nose);
  
  //绘制嘴巴
  var mouth=new createjs.Shape();
  mouth.graphics.ss(4).s("rgba(0,0,0,.5)").a(0,0,100,Math.PI*60/180,Math.PI*120/180);
  mouth.x=500;
  mouth.y=200;
  stage.addChild(mouth);
  
  stage.update();

完工！暂时到这里。本教程为系列教程，未完待续。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

whqet

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
6
评论
EaselJS简明教程1-绘图

EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。为了便于大家学习，结合官方教程和官方DEMO我们来写一个简明教程，主要是对自己的学习做个梳理，也希望对大家有所帮助。
复制链接

扫一扫