遮罩。
flash里边做动画,很重要的几个概念:补间动画、遮罩层、引导层。
不知道怎么说,反正遮罩很重要。看完Sprite就想起来要看看遮罩了。
canvas本身就能实现遮罩效果,createjs里边的遮罩估计也就是用了canvas里原生的东西,也没做什么更多的处理。
还是先看代码:
//创建stage,参数为canvas的id
var stage=new createjs.Stage("gameMain");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", tick);
function tick(event){
stage.update();//需要tick,然后自己update,才能刷新显示。
}
//遮罩
//创建一个Bitmap
var bmp=new createjs.Bitmap("1.png");
bmp.x=0;
bmp.y=0;
var rect=new createjs.Shape();
rect.graphics.beginFill("#000000");
rect.graphics.drawRect(0,0,100,100);
//创建遮罩
var mask=new createjs.Shape();
mask.graphics.beginFill("#000000");
mask.graphics.drawCircle(0,0,100);
mask.x=100;
mask.y=100;
stage.addChild(bmp);
bmp.mask=mask;//被遮罩层可以是任意DisplayObject,遮罩层只能是Shape.其他都不行,可以自己验证。shape作为遮罩的同时还可以被加入到显示列表。
//stage.addChild(mask);
//mask.mask=rect;
var SPEED=5;
stage.addEventListener("tick",onTick);
function onTick(e){
bmp.x+=SPEED;
if(bmp.x>0)bmp.x-=100;
}
createjs里边作为遮罩层的显示元件,只能是Shape,这点不如flash。所以说只是用的Canvas原生的遮罩而已。
createjs里边,遮罩最好不要被添加到显示列表,一个坑,可以自己试试,这样一来遮罩的位置永远是相对于舞台的,这点也不如flash灵活。
仿的as,只是仿,逻辑上并不完备,而且有各种坑,所以能做什么就做什么,按规范来。没事的时候倒是可以研究研究。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。