核心JS代码:
var cjs = createjs,
canvas,
stage,
container,
w = window.innerWidth,
h = window.innerHeight,
image;
function init() {
//设置canvas属性
canvas = document.getElementById('game');
canvas.width = w;
canvas.height = h;
//创建舞台
stage = new cjs.Stage(canvas);
container = new cjs.Container();//绘制外部容器
stage.addChild(container);
//加载图片
image = new Image();
image.src = "imgs/1.png";
image.onload = handleImageLoad;
}
function handleImageLoad(event) {
var bitmap = new cjs.Bitmap(event.target);//cjs.Bitmap("imgs/1.png") PS: 必须图片加载完成之后 img.onload之后执行
bitmap.x = w - bitmap.getBounds().width >>1;
bitmap.y = h - bitmap.getBounds().height >>1;
bitmap.on('click', function () {
alert();
});
//加入场景
container.addChild(bitmap);
stage.update();
}
说明讲解:
1:创建加载图片
//加载图片
image = new Image();
image.src = "imgs/1.png";
image.onload = handleImageLoad;
2:实例化一个图
var bitmap = new cjs.Bitmap(event.target);//cjs.Bitmap("imgs/1.png") PS: 必须图片加载完成之后 img.onload之后执行
PS:Bitmap(imgobj|imgurl) 当是 imgurl时,必须在img.onload之后执行;