直播app系统源码，canvas上放置按钮并实现点击之后全屏显示

直播app系统源码，canvas上放置按钮并实现点击之后全屏显示

html

              <div style="">
                <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
    }

  以上就是直播app系统源码，canvas上放置按钮并实现点击之后全屏显示， 更多内容欢迎关注之后的文章