如何使用Createjs来编写HTML5游戏（二）使用EaselJS处理图片

如何使用EaselJS载入图片并进行简单的处理

除了使用EaselJS中的Shape()来创建图形，EaselJS中还提供Bitmap可以很方便的载入图片，同Shape一样只需要创建一个Bitmap实例。

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

直接创建并导入到Stage中，随后调用stage.update()，一般情况下仅仅做这些是不能正常显示图片，在图片载入后必须要重绘一下stage才能显示出来。所以使用stage的tick事件来创建的基础框架可以正常显示，因为tick事件中，每隔一点时间自动刷下stage，最基本的框架如下。

<script>
    var stage;
    function init(){
        stage = new createjs.Stage("game");

        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener('tick',update);
    }


    function update(event){
        stage.update();
    }
</script>

把创建Bitmap并添加到stage的语句添加到init()中，

<script>
    var stage;
    function init(){
        stage = new createjs.Stage("game");

        var bg = new createjs.Bitmap("./background.png");
        stage.addChild(bg);

        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener('tick',update);
    }


    function update(event){
        stage.update();
    }
</script>

刷新页面即可显示出图片，同样可以设置Bitmap的x/y，scaleX/scaleY，alpha等属性，添加shadow等处理，不过对于图片，有几个特别的地方。

1.只选取图片的一部分显示在页面

如果只打算显示一部分&#x