SOURCE

var image = new Image();
image.src = 'http://06wjin.sinaapp.com/html5/billd/img/billd-stand.png';

var sprite = function(opt) {
    var sprite_proto = {};
    sprite_proto.image = opt.image;
    sprite_proto.rect = opt.rect;
    sprite_proto.frames = opt.frames;
    sprite_proto.fps = opt.fps || 1;
    sprite_proto.current_frame_idx = 0;
    sprite_proto.next = function() {
        var cur_frame = this.frames[this.current_frame_idx];
        this.current_frame_idx += 1;
        if (this.current_frame_idx == this.frames.length) {
            this.current_frame_idx = 0;
        }
        return cur_frame;
    };
    return sprite_proto;
}

var butterfly = sprite({
    image: image,
    rect:{x: 0, y: 0, w: 120, h: 120},
    frames: [
        {x: 0, y: 0, w: 120, h: 120},
        {x: 120, y: 0, w: 120, h: 120},
        {x: 240, y: 0, w: 120, h: 120},
        {x: 360, y: 0, w: 120, h: 120},
        {x: 480, y: 0, w: 120, h: 120},
        {x: 600, y: 0, w: 120, h: 120}
    ]
});

var canvas = document.getElementById('butterfly');
canvas.width = 120;
canvas.height = 120;

var world = function(opt) {
    var world_proto = {};
    world_proto.context = opt.context;
    world_proto.rect = opt.rect;
    world_proto.clear = function() {
      this.context.clearRect(0, 0, this.rect.w, this.rect.h);
    }
    world_proto.render = function(sprite) {
      var frame = sprite.next();
      this.context.drawImage(
          sprite.image,
          frame.x,
          frame.y,
          frame.w,
          frame.h,
          0,
          0,
          sprite.rect.w,
          sprite.rect.h
      );
    }
    return world_proto;
}

var my_world = world({
    context: canvas.getContext('2d'),
    rect: {x: 0, y: 0, w: 600, h: 120},
  	fps: 30,
});

image.addEventListener('load', function(){
    setInterval(function(){
      my_world.clear();
      my_world.render(butterfly);
    },20);
});

<canvas id="butterfly"></canvas>