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

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

html

 

1	<div style=""><br>                <div class="canvas-div"><br>                  <canvas id="playCanvas0" width="600" height="427" /><br>                  <i class="el-icon-zoom-in" @click="fullScreen" /><br>                </div><br>              </div><br>

​

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

 

css

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

 

1	<br>.canvas-div {<br>  white-space:nowrap;<br>  position: relative;// 注意<br>  height: 427px;<br>}<br>.el-icon-zoom-in {<br>  font-size: 30px;<br>  color: white;<br>  bottom: 0;// 注意<br>  right: 0;// 注意<br>  position: absolute;// 注意<br>}<br>

 

js

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

 

1

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

 

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