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

Html

Css

Js

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



图片全屏



canvas全屏



视频全屏



button点我全屏按扭全屏

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，它不仅只用于video视频全屏，还可以用在其他HTML中一些dom元素上，如：div, img, canvas等，都是可以使其全屏的。可是目前在一些低版本的浏览器上兼容性不是很好，不过听说在2020年所有的浏览器都全面支持HTML5、ES6等一系列新特性、API等。     

在此次分享中如有不足之处，还请不吝赐教，相互学习，共同成长！

说明： 

1、在上面代码中分别在不同的dom元素上去实现全屏效果，如： div, img, video等。

2、如果在上面显示代码结果栏中点击后没效果的，请下载相应的html, css, js代码在本地组成html文件后，在其他高版本的浏览器（推荐Google Chrome浏览器）中运行看效果。

3、在代码中做了相应的注释和说明，可根据自己需要进行扩展和调试。

４、真正实现全屏的代码并不多，就那么几行代码（注：在js代码中全屏用了两种调用方式），其他大部都用于浏览器能力检测去了。