HTML5让Canvas全屏的例子

HTML5 herman 4402浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

本demo兼容所有主流浏览器。在生活中也有很多这样的使用场景,比如你在玩某页游的时候,希望游戏全屏展示。传统的做法,就是在浏览器里使用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>

版权声明:本文为业余草原创文章,未经博主允许不得转载。原文地址:http://www.xttblog.com/?p=255

 

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5让Canvas全屏的例子