全屏，HTML5全屏API，FullScreen功能方法

Html

Css


    div 点我全屏给你看哦DIV全屏



    图片全屏



    canvas全屏



    视频全屏



    按扭全屏

section {
	float:left;
	margin:10px;
	width:260px;
	height:200px;
	font-size:24px;
	text-align:center;
	line-height:36px;
	border:1px solid gray;
	overflow:hidden;
}
section div,img,canvas,video,button {
	display:block;
	margin:auto;
	width:100%;
	cursor:pointer;
}
div {
	min-height:156px;
	line-height:156px;
	color:white;
	font-weight:bold;
	background-color:#FF00E3;
}
canvas {
	background-color:blue;
}
video {
	background-color:#666;
}
button {
	min-height:156px;
	line-height:156px;
	color:white;
	font-size:24px;
	font-weight:bold;
	background-color:#0AAF00;
}

window.onload = function() {

//打开全屏方法
    function openFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();
        }
    }

//退出全屏方法
    function exitFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExiFullscreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();

} else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

//div全屏(全屏方法1)
    document.getElementById("div").addEventListener('click', function() {
        openFullscreen(this); //调用上面全屏方法1
    }, false);

//img全屏
    document.getElementById("img").addEventListener('click', function() {
        alert('请下载相应的html, css, js代码在本地运行看效果！');
        //全屏方法2
        var RFSN = document.documentElement.requestFullScreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullScreen;
        if (RFSN) {
            RFSN.call(this);
        } else if (typeof window.ActiveXObject != "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }, false);

//canvas全屏
    document.getElementById("canvas").addEventListener('click', function() {
        openFullscreen(this);
    }, false);

//视频全屏
    document.getElementById("video").addEventListener('click', function() {
        alert('请下载相应的html, css, js代码在本地运行看效果！');
        openFullscreen(this);
    }, false);

//按扭全屏
    document.getElementById("button").addEventListener('click', function() {
        openFullscreen(this);
    }, false);

//canvas动画
    var canvas = document.getElementById('canvas'), //获取canvas元素
        context = canvas.getContext('2d'), //获取画图环境，指明为2d
        centerX = canvas.width / 2, //Canvas中心点x轴坐标
        centerY = canvas.height / 2, //Canvas中心点y轴坐标
        rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
        speed = 0.1; //加载的快慢就靠它了

//绘制蓝色外圈
    function blueCircle(n) {
        context.save();
        context.strokeStyle = "#fff"; //设置描边样式
        context.lineWidth = 5; //设置线宽
        context.beginPath(); //路径开始
        context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke(); //绘制
        context.closePath(); //路径结束
        context.restore();
    }

//绘制白色外圈
    function whiteCircle() {
        context.save();
        context.beginPath();
        context.strokeStyle = "white";
        context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
        context.stroke();
        context.closePath();
        context.restore();
    }

//百分比文字绘制
    function text(n) {
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.strokeStyle = "#fff"; //设置描边样式
        context.font = "40px Arial"; //设置字体大小和字体
        //绘制字体，并且指定位置
        context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10);
        context.stroke(); //执行绘制
        context.restore();
    }

//动画循环
    (function drawFrame() {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);
        whiteCircle();
        text(speed);
        blueCircle(speed);
        if (speed > 100) speed = 0;
        speed += 0.1;
    }());

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

全屏，HTML5全屏API，FullScreen功能方法



代码描述：HTML5全屏API，视频全屏，其他dom元素全屏方法

注：请下载后在本地查看效果，因演示嵌套框架所以无法展示
前言：
在HTML5中提供了一个全屏API：fullscreen，它不仅只用于video视频全屏，还可以用在其他HTML中一些dom元素上，如：div, img, canvas等，都是可以使其全屏的。可是目前在一些低版本的浏览器上兼容性不是很好，不过听说在2020年所有的浏览器都全面支持HTML5、ES6等一系列新特性、API等。
在此次分享中如有不足之处，还请不吝赐教，相互学习，共同成长！
说明：
1、在上面代码中分别在不同的dom元素上去实现全屏效果，如： div, img, video等。
2、如果在上面显示代码结果栏中点击后没效果的，请下载相应的html, css, js代码在本地组成html文件后，在其他高版本的浏览器（推荐Google Chrome浏览器）中运行看效果。
3、在代码中做了相应的注释和说明，可根据自己需要进行扩展和调试。
４、真正实现全屏的代码并不多，就那么几行代码（注：在js代码中全屏用了两种调用方式），其他大部都用于浏览器能力检测去了。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

沐枫自然

相关代码

全屏，HTML5全屏API，FullScreen功能方法

前言：

最新