公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
本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）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » HTML5让Canvas全屏的例子