简介：作者：beidan来源：https://www.cnblogs.com/beidan/p/7055422.htmlcreatejs简介官网：http://www.createjs.cc/createjs中包含以下四个部分：EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上 ...
作者：beidan来源：https://www.cnblogs.com/beidan/p/7055422.htmlcreatejs简介
<script src="easeljs-0.7.1.min.js"></script> //引入相关的js文件<canvas id="canvas"></canvas>var canvas = document.querySelector("#canvas");//创建舞台var stage = new createjs.Stage(canvas);//创建一个Shape对象，此处也可以创建文字Text,创建图片Bitmapvar rect = new createjs.Shape();//用画笔设置颜色，调用方法画矩形，矩形参数：x,y,w,hrect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);//添加到舞台 stage.addChild(rect);//刷新舞台stage.update();
createjs.Ticker.setFPS(60);4. 控制多个显示对象的层级关系stage，contain对象有个children属性代表子元素，是一个数组，里面的元素层级像下标一样从0开始，简单来说就是后面的覆盖前面的，addChild方法是添加到显示列表的最后。我们也可以动态改变children的层叠效果。 stage.setChildIndex(red,1);5.容器 container它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一个Container中方便统一管理。比如一个人物，他由手，脚，头，身体组成，你可以将这几个部分放在同一个container中，统一移动。使用方法也比较简单： var contain = new createjs.Container(); contain.addChild(bgImg);contain.addChild(bitmap); stage.addChild(contain);蹬蹬蹬～本篇文章的重点，绘制图像并对图像进行处理6. 绘制图片
var bg = new createjs.Bitmap("./background.png");stage.addChild(bg);stage.update();按照上面的EaselJS的正常的绘制流程来说，上面这段代码应该可以正常显示。但是，只是有些情况下可以正常显示的，这个图像资源需要确定加载成功后才可以new，否则不会有图像在画布上，如果有做资源预加载，可以直接使用上面的代码，如果没有，则需要在image加载完成onload之后才进行绘制
var img = new Image();img.src = "./img/linkgame_pass@2x.png";img.onload = function () { var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update();}
stage = new createjs.Stage("gameView");bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");bg.x = 10;bg.y = 10;//遮罩图形shape = new createjs.Shape();shape.graphics.beginFill("#000").drawCircle(0, 0, 100);shape.x = 200;shape.y = 100;bg.mask = shape; //给图片bg添加遮罩stage.addChild(shape);stage.addChild(bg);stage.update();
var blur = new createjs.BlurFilter(5,5,1);bg.filters = [blur];我们发现，图片还是没有变模糊，原因是图片添加了filter后stage立即刷新，filter只能保持一帧的效果，第二帧filter则失效了。而使用图片的cache()方法后，可以使得无论舞台怎么刷新，都可以保持住Filter的效果，添加cache还有很多作用，可以提高FPS，缓存等 bg.cache(0,0,bg.image.width,bg.image.height);6.3 使用Rectangle剪裁图片使用EaselJS内置的Rectangle对象来创建一个选取框，显示图片的某各部分。
stage = new createjs.Stage("gameView");bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");bg.x = 10;bg.y = 10;var rect = new createjs.Rectangle(0, 0, 121, 171);bg.sourceRect = rect;stage.addChild(bg);stage.update();
createjs.Touch.enable(stage);对于Bitmap，Shape等对象，都可以直接使用addEventListener进行事件监听 bitmap = new createjs.Bitmap("");bitmap.addEventListener（‘click’，handle）;8. CreateJs的渲染模式CreateJs提供了两种渲染模式，一种是用setTimeout，一种是用requestAnimationFrame，默认是setTimeout，默认的帧数是20，一般的话还没啥，但是如果动画多的话，设置成requestAnimationFrame模式的话，就会感觉到动画如丝般的流畅。createjs.Ticker.timingMode = createjs.Ticker.RAF;9.适配在移动端开发中，不得不面对一个多屏幕，多尺寸的问题，所以适配问题显得特别重要。先固定canvas的width为750，根据设备的高宽比设置对应750宽的高，然后用css将canvas的缩放或拉伸整个屏幕，这种方法可以保证canvas内部的元素的逻辑尺寸大小不发生变化，也能达到适配 <canvas id="game" width="750" height="700"></canvas>注意，以上代码的width，height不同于css中的width，height。比如，你在canvas内部绘制图片，用x，y轴进行定位，这里的x，y是相对于canvas这个整体。我们再把canvas当成一整张图片使用css进行适配 canvas{ width: 100%;}那么，就会有以下的效果，canvas会适配屏幕尺寸，里面的图片也会等比例变大变小。
|
