标题党"玩转", 我真的是在玩怎么转...
参考一篇很经典的博文: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)
时间: 2024-10-12 17:01:10