网页F11 canvas全屏显示

  如何让canvas对象全屏显示,在网页中按下F11键时canvas对象全屏显示。

 

  网页F11 canvas全屏显示源代码如下

网页F11 canvas全屏显示

<title>canvas F11全屏显示示例</title>
<canvas id="c" stlyle="border:solid 1px #000"></canvas>
<script>
    var c = document.getElementById('c');
    if (c.getContext) {
        document.onkeydown = function (e) {
            if (e.keyCode == 122) { //按下F11
                CanvasFullScreen();//调用函数将canvas全屏显示
                return false;//阻止默认F11事件
            }
        }
        document.write('<input type="button" onclick="CanvasFullScreen(c)" value="点击全屏显示Canvas对象"/>');
        function CanvasFullScreen(el,cancel) {
            var method = cancel ? "CancelFullScreen" : "RequestFullScreen", supportFullScreen = false;
            var prefixs = ["webkit", "moz", "ms", "o", ""];//不同浏览器对全屏方法名称不一样,需要增加不同前缀
            prefixs.forEach(function (prefix) {
                if (typeof el[prefix + method] == 'function') { el[prefix + method](); supportFullScreen = true; }
            });
            if (!supportFullScreen) alert('canvas不支持全屏显示');
        }
    }
    else alert('浏览器不支持HTML5 Canvas对象');
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:网页F11 canvas全屏显示

评论(0)Web开发网
阅读(249)喜欢(1)JavaScript/Ajax开发技巧