CreateJs系列教程之 EaselJs_4_绘制图片（Bitmap）

标签：

核心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之后执行；

演示效果：

CreateJs系列教程之 EaselJs_4_绘制图片（Bitmap）

标签：

原文地址：http://my.oschina.net/leipeng/blog/529520