核心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之后执行;
演示效果:
时间: 2024-10-08 10:29:17