23
2015
01

(七)createjs-mask

遮罩。

flash里边做动画,很重要的几个概念:补间动画、遮罩层、引导层。

不知道怎么说,反正遮罩很重要。看完Sprite就想起来要看看遮罩了。

canvas本身就能实现遮罩效果,createjs里边的遮罩估计也就是用了canvas里原生的东西,也没做什么更多的处理。

还是先看代码:

  1. //创建stage,参数为canvas的id

  2. var stage=new createjs.Stage("gameMain");

  3. createjs.Ticker.setFPS(30);

  4.             createjs.Ticker.addEventListener("tick", tick);

  5. function tick(event){

  6.                 stage.update();//需要tick,然后自己update,才能刷新显示。

  7.             }

  8. //遮罩

  9. //创建一个Bitmap

  10. var bmp=new createjs.Bitmap("1.png");

  11. bmp.x=0;

  12. bmp.y=0;

  13.    

  14. var rect=new createjs.Shape();

  15. rect.graphics.beginFill("#000000");

  16. rect.graphics.drawRect(0,0,100,100);

  17. //创建遮罩

  18. var mask=new createjs.Shape();

  19. mask.graphics.beginFill("#000000");

  20. mask.graphics.drawCircle(0,0,100);

  21. mask.x=100;

  22. mask.y=100;

  23. stage.addChild(bmp);

  24. bmp.mask=mask;//被遮罩层可以是任意DisplayObject,遮罩层只能是Shape.其他都不行,可以自己验证。shape作为遮罩的同时还可以被加入到显示列表。

  25. //stage.addChild(mask);

  26. //mask.mask=rect;

  27. var SPEED=5;

  28. stage.addEventListener("tick",onTick);

  29. function onTick(e){

  30. bmp.x+=SPEED;

  31. if(bmp.x>0)bmp.x-=100;

  32. }

createjs里边作为遮罩层的显示元件,只能是Shape,这点不如flash。所以说只是用的Canvas原生的遮罩而已。

createjs里边,遮罩最好不要被添加到显示列表,一个坑,可以自己试试,这样一来遮罩的位置永远是相对于舞台的,这点也不如flash灵活。

仿的as,只是仿,逻辑上并不完备,而且有各种坑,所以能做什么就做什么,按规范来。没事的时候倒是可以研究研究。


点击查看实例

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。