直播app系統原始碼,canvas上放置按鈕並實現點選之後全屏顯示
阿新 • • 發佈:2022-11-30
直播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上放置按鈕並實現點選之後全屏顯示, 更多內容歡迎關注之後的文章