canvas上放置按钮并实现点击之后全屏显示

首先看效果，在canvas的右下角有一个放大的按钮，点击这个按钮之后canvas进行全屏显示

直接上代码：

html

              <div style="background-color: #1a1a1a;">
                <div class="canvas-div">
                  <canvas id="playCanvas0" width="600" height="427" />
                  <i class="el-icon-zoom-in" @click="fullScreen" />
                </div>
              </div>

注意这个i标签就是体现放大按钮

css

然后在css处将其固定在右下角，下边【注意】那几行代码起该作用

.canvas-div {
  white-space:nowrap;
  position: relative;		// 注意
  height: 427px;
}

.el-icon-zoom-in {
  font-size: 30px;
  color: white;
  bottom: 0;			// 注意
  right: 0;				// 注意
  position: absolute;	// 注意
}

js

在js部分实现点击标签按钮然后对canvas进行全屏显示

    function fullScreen() {
      var element = document.getElementById('playCanvas0')
      var method = 'RequestFullScreen'

      var prefixMethod
      ['webkit', 'moz', 'ms', 'o', ''].forEach(function(prefix) {
        if (prefixMethod) { return }
        if (prefix === '') {
          // 无前缀，方法首字母小写
          method = method.slice(0, 1).toLowerCase() + method.slice(1)
        }
        var fsMethod = typeof element[prefix + method]
        if (fsMethod + '' !== 'undefined') {
          // 如果是函数,则执行该函数
          if (fsMethod === 'function') {
            prefixMethod = element[prefix + method]()
          } else {
            prefixMethod = element[prefix + method]
          }
        }
      }
      )
      return prefixMethod
    }

然后就可以实现啦！