ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5でCanvasを全画面表示にする例 - 素人草_html/css_WEB-ITnose
HTML5でCanvasを全画面表示にする例 - 素人草_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 08:55:031170ブラウズ
このデモは、すべての主要なブラウザと互換性があります。たとえば、Web ゲームをプレイしているときに、ゲームを全画面で表示したい場合など、このような使用シナリオは数多くあります。従来のアプローチは、div を使用してブラウザーで全画面をシミュレートすることです。このアプローチでは、真の上向きフルスクリーンを実現することはできません。
以下では、HTML5 Canvas を使用してフルスクリーンを実現する例を説明します。効果は次のとおりです:
コードは次のとおりです:
<!DOCTYPE HTML><html> <head> <title>HTML5实现Canvas全屏——业余草</title> <meta charset="utf-8"> </head> <body> <canvas id="xttblog" width="548" height="364"></canvas> <br/> <input value="点击全屏" onclick="fullScreen();" type="button"> <script type="text/javascript"> // 欢迎您访问业余草官网：www.xttblog.com // 涛哥qq群：454796847 window.onload = function(){ var xttblog =document.getElementById('xttblog'); var context = xttblog.getContext('2d'); var img = new Image(); img.onload = function(){ draw(this); }; img.src = 'http://www.xttblog.com/wp-content/uploads/2016/03/xttblog.png'; function draw(obj){ context.drawImage(obj,0,0); } }; function fullScreen() { var element = document.getElementById('xttblog'),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; }; </script> </body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。