canvas下的全屏问题

Object 发布于2019-08-30 15:52 / 1656人阅读

摘要：这段时间在管理后台，有用到图片全屏的，我是用的引入的图片，哎也是给自己挖了一个大坑，没办法，只能踩坑走啦，所以当时想着能不能直接用直接进行图片全屏查看，不过网上百度出来的也是五花八门，结合百度自己整理了一个小的点击全屏引入图片在中进行全屏并

这段时间在管理后台，有用到图片全屏的，我是用canvas的引入的图片，哎！也是给自己挖了一个大坑，没办法，只能踩坑走啦，所以当时想着能不能直接用canvas直接进行图片全屏查看，不过网上百度出来的也是五花八门，结合百度自己整理了一个小的demo

HTML

window.onload = function(){  
          //引入图片在canvas中
        var blog =document.getElementById("blog");  
        var context = blog.getContext("2d");  
        var img = new Image();  
        img.onload = function(){  
            draw(this);  
        };  
        img.src = "img/2.jpg";  
        function draw(obj){  
            context.drawImage(obj,0,0);        
        }  
    };  
    //进行全屏并适配各浏览器
      function fullScreen() {
          var element = document.getElementById("blog"),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;
        };

服务器托管混合云 js写的全屏轮播图 RDLC报表在IE10下的问题最快的全排列算法 html网页的全选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116415.html

canvas下的全屏问题

摘要：这段时间在管理后台，有用到图片全屏的，我是用的引入的图片，哎也是给自己挖了一个大坑，没办法，只能踩坑走啦，所以当时想着能不能直接用直接进行图片全屏查看，不过网上百度出来的也是五花八门，结合百度自己整理了一个小的点击全屏引入图片在中进行全屏并这段时间在管理后台，有用到图片全屏的，我是用canvas的引入的图片，哎！也是给自己挖了一个大坑，没办法，只能踩坑走啦，所以当时想着能不能直接用c...

alexnevsky 2019-08-01 16:13 评论0 收藏0
js全屏模式轻松掌握[局部元素全屏展示]

摘要：推荐这么做，因为如果每个都要这样重复的判断浏览器前缀，那也太恶心了浏览器是否支持全屏模式属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。 showImg(https://segmentfault.com/img/remote/1460000017229080?w=700&h=467); 我第一次对网页全屏模式有概念，是那种网页播放视频的全屏播放的那种。感觉很强，前几个星期有个...

amc 2019-08-23 13:50 评论0 收藏0