利用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();
};

转载于:https://www.cnblogs.com/xiaoyucoding/p/8660006.html