玩转createjs

Posted 2020-08-20 tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了玩转createjs相关的知识，希望对你有一定的参考价值。

标题党"玩转", 真的是在玩怎么转...

参考一篇很经典的博文:createjs入门

做移动版(750x1334)的时候出来不居中啊, 不是掉在下面就是滑到右面,

canvas里面的东西又写不了css,咋办呢, 后来发现原来是光创建了stage却没有创建container导致的:

 var stage;
 init();

 function init() {
     var canvas = document.getElementById("testCanvas");
     stage = new createjs.Stage(canvas);
     stage.canvas.width = 750;
     stage.canvas.height = 1334;
     stage.autoClear = true;
     //绘制外部容器
     container = new createjs.Container(); 
     stage.addChild(container);
     //添加背景图
     var bg = new createjs.Bitmap("../res/bg.jpg");
     stage.addChild(bg);
     //增加5个冰激凌，不断做旋转和放缩
     for (var i = 0; i < 5; i++) {
         var man = new createjs.Bitmap("../res/ice_cream.png");
         man.regX = 60;
         man.regY = 42;
         man.x = canvas.width / 5 * 4;
         man.y = canvas.height / 6 * (i + 1);
         man.scaleX = man.scaleY = 1;
         stage.addChild(man);
         createjs.Tween.get(man, {
             loop: true
         }, true).to({
             rotation: 360,
             scaleX: 2,
             scaleY: 2
         }, 1000).to({
             rotation: 360,
             scaleX: 1,
             scaleY: 1
         }, 1000);
         man.addEventListener("click", eventCallback);
         //监听点击非常方便，位图的透明区域忽略鼠标事件
     }

     function eventCallback(event) {
         console.log("click", event.currentTarget);
     }
     stage.update();
     createjs.Ticker.setFPS(60);
     createjs.Ticker.addEventListener("tick", tick);
 }

 //这里有点猥琐，需要用户自行控制舞台不断update更新
 function tick(event) {
     stage.update(event);
 }

挺欢乐的, 注意不要往<div>上面调<canvas>的方法!(t.t)

以上是关于玩转createjs的主要内容，如果未能解决你的问题，请参考以下文章

H5实例教学--从AnimateCC到CreateJS入门

CreateJS：numChildren 不适用于 Animate 生成的代码

01 createJS代码作用域

createjs使用雪碧图代码

TypeError：createjs.Sprite 不是构造函数

玩转Bash变量