利用canvas做一个简单个gif停止和播放

var ImagePlayer = function(options) {
    this.control = options.control;
    this.image = options.image;
    this.STOP_TEXT = '停止';
    this.PLAY_TEXT = '开始';
    this.drawFirstFrame = function() {};
    this.stop = function() {
        if (!this.baseUrl) {
            this.baseUrl = this.image.src;
        }
        var canvas = document.createElement('canvas');
        var width = this.image.width;
        var height = this.image.height;
        if (width && height) {
            canvas.width = width;
            canvas.height = height;
            canvas.getContext('2d').drawImage(this.image, 0, 0, width, height);
            try {
                this.firstFrame = canvas.toDataURL('image/gif');
            } catch (e) {
                this.image.removeAttribute('src');
                canvas.style.position = 'absolute';
                this.image.parentElement.insertBefore(canvas, this.image);
                this.image.style.opacity = '0';
                this.storeCanvas = canvas;
            }
        }
    };
    this.play = function() {
        if (this.storeCanvas) {
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            this.image.style.opacity = '';
        }
        if (this.baseUrl) {
            this.image.src = this.baseUrl;
        }
    };
    this.handleControl = function() {
        if (this.control.value === this.STOP_TEXT) {
            this.stop();
            this.control.value = this.PLAY_TEXT;
        } else {
            this.play();
            this.control.value = this.STOP_TEXT;
        }
    };
    this.initEvent = function() {
        this.control.addEventListener('click', this.handleControl.bind(this), false);
    };
    this.init = function() {
        this.initEvent();
    };
    this.init();
};