HTML5让Canvas全屏的例子–业余草_html/css_WEB-ITnose

本demo兼容所有主流浏览器。在生活中也有很多这样的使用场景，比如你在玩某页游的时候，希望游戏全屏展示。传统的做法，就是在浏览器里使用div模拟全屏。这种做法并不能达到真正意义上行的全屏。

下面我就教大家使用HTML5的Canvas实现全屏的例子。效果如下：

代码如下：

          HTML5实现Canvas全屏——业余草 	         	    	   	   	   		// 欢迎您访问业余草官网：HdhCmsTestxttblog测试数据  		// 涛哥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://HdhCmsTestxttblog测试数据/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;		};  	      

查看更多关于HTML5让Canvas全屏的例子–业余草_html/css_WEB-ITnose的详细内容...