canvas图片数字计时

ps：整个源代码见附件

一.准备spirit素材

本文所用素材是我自己手动切割的，所以。。。。 
制作sprite推荐神器texturepacker https://www.codeandweb.com/texturepacker 

准备10张数字图片，文件名和数字内容一致，依次拖入texturepacker，便可生成对应的spirit所需要的data。

  
  
{
"images": [
"number.png"
],
"frames": [
[1, 1, 246, 398, 0, 0, 0],
[249, 1, 246, 398, 0, 0, 0],
[1, 401, 246, 398, 0, 0, 0],
[249, 401, 246, 398, 0, 0, 0],
[1, 801, 246, 397, 0, 0, 0],
[249, 801, 246, 397, 0, 0, 0],
[1, 1200, 246, 397, 0, 0, 0],
[249, 1200, 246, 397, 0, 0, 0],
[1, 1599, 246, 397, 0, 0, 0],
[249, 1599, 246, 397, 0, 0, 0]
],
"animations": {
"0": { "frames": [4] },
"1": { "frames": [5] },
"2": { "frames": [6] },
"3": { "frames": [0] },
"4": { "frames": [1] },
"5": { "frames": [7] },
"6": { "frames": [8] },
"7": { "frames": [2] },
"8": { "frames": [3] },
"9": { "frames": [9] }
},
"texturepacker": [
    "SmartUpdateHash: $TexturePacker:SmartUpdate:b387407a091e8fb0769ecd10b0d27b6b:3f9ca832d37bfffe36aeb22e31c1786d:508720d883ff213f9536efb7456c155b$",
    "Created with TexturePacker (https://www.codeandweb.com/texturepacker) for EaselJS"
    ]
}

images：texturepacker生成spirit图片 
frames：指定每一帧的信息，参数依次为x,y,width, height,imageIndex,regX,regY（x,y为该帧对应的图片在spirit图片上的起始位置） 
animations定义帧的动画对象

二、建立SpriteSheet

创建SpriteSheet对象需要传递一个data，包含images，frames和animations，这里我们已经使用texturepacker生成好了数据，将它赋值给变量data即可。

  
  
var spritesheet = new createjs.SpriteSheet(data);

三、BitmapText

BitmapText用来使用SpriteSheet中的图片展现文本，接受两个参数，一个是待显示的文本，一个是spritesheet对象。

  
  
 var timeTxt = new createjs.BitmapText(time.toString(), spritesheet);

四、创建舞台

舞台stage用来容纳呈现所有的元素，我们创建一个舞台，并将这个舞台和我们的canvas绑定。然后将我们创建的BitmapText添加到舞台。 
注意：每次修改stage之后都要更新它，才能生效stage.update();

  
  
var canvas = documents.getElementById('canvas');
var stage = new createjs.Stage(canvas);
stage.addChild(timeTxt);
stage.update();

五、加载图像

将操作放在图像onload之后

  
  
 var img = new Image();
img.src='number.png';
img.onload=function(){
  ...
}