直播app系統原始碼，canvas上放置按鈕並實現點選之後全屏顯示

直播app系統原始碼，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
    }

  以上就是直播app系統原始碼，canvas上放置按鈕並實現點選之後全屏顯示， 更多內容歡迎關注之後的文章