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

最新推荐文章于 2022-02-26 10:41:13 发布

173300598

最新推荐文章于 2022-02-26 10:41:13 发布

阅读量1.8k

点赞数

分类专栏： createjs

createjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CreateJS加载图片，并将其居中显示在Canvas画布上。通过实例化Bitmap对象并监听其onload事件来确保图片加载完成后再进行绘制。此外，还介绍了如何为图片添加点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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