Createjs Series Tutorial easeljs_4_ drawing pictures (Bitmap)

Core JS Code:

var cjs = createjs,    canvas,    stage,     container,    w = window.innerwidth,    h =  window.innerheight,    image;function init ()  {    // Set the Canvas property     canvas = document.getelementbyid (' Game ');     canvas.width = w;    canvas.height = h;    //Creating a stage     stage = new cjs. Stage (canvas);     container = new cjs. Container ();//Draw external container     stage.addchild (Container);     //load Image      image = new image ();    image.src =  "Imgs/1.png ";     image.onload = handleimageload;} Function handleimageload (Event)  {&NBsp;   var bitmap = new cjs. Bitmap (event.target);//cjs. Bitmap ("Imgs/1.png")  PS:  must be finished after the picture is loaded  img.onload execute     bitmap.x =  W - bitmap.getbounds (). width >>1;    bitmap.y = h -  bitmap.getbounds (). Height >>1;    bitmap.on (' click ', function  ( )  {        alert ();     });     //Join Scene     container.addchild (bitmap);     stage.update ();}

Explanation:

1: Create load Picture

Load image image = new image ();    IMAGE.SRC = "Imgs/1.png"; Image.onload = Handleimageload;

2: Instantiate a diagram

var bitmap = new CJs. Bitmap (event.target);//cjs. Bitmap ("Imgs/1.png") PS: Must be finished after the picture is loaded Img.onload execute

Ps:bitmap (Imgobj|imgurl) when it is imgurl, it must be executed after img.onload;

Demo Effect:

Createjs Series Tutorial easeljs_4_ drawing pictures (Bitmap)