js全屏

<section>
    <div id="div">div 点我全屏给你看哦</div>DIV全屏
</section>

<section>
    <img id="img" src="http://www.jq22.com/img/cs/500x300-1.png">图片全屏
</section>

<section>
    <canvas id="canvas"></canvas>canvas全屏
</section>

<section>
    <video id="video" src="http://jq22.qiniudn.com/jq22com.webm" controls=""></video>视频全屏
</section>

<section>
    <button id="button">button点我全屏</button>按扭全屏
</section>

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;
    }());

}