调整合适的画布尺寸（游戏）

最新推荐文章于 2024-07-31 19:12:08 发布

Rkatsiteli

最新推荐文章于 2024-07-31 19:12:08 发布

阅读量1.8k

点赞数

分类专栏： JavaScript + JQuery FRONT-END + WEB 文章标签： canvas

本文链接：https://blog.csdn.net/qq_16559905/article/details/51304243

版权

JavaScript + JQuery 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

FRONT-END + WEB

22 篇文章 0 订阅

订阅专栏

1、处理尺寸调整

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>处理尺寸调整</title>
    </head>
    <style>
        body{margin: 0 auto;overflow-x: hidden;}
        #container{margin:0 auto;width:480px;height: 100%;}
        canvas{background-color:#04be02}
    </style>
    <script src="../build/jquery.min.js"></script>
    <script src="vconsole.min.js"></script>

    <body>
        <div id="container">
            <canvas id="game" width="480" height="480"></canvas>
        </div>
    </body>
    <script>         

        //等待document.ready回调
        $(function(){
            window.scrollTo(0,1);//去除地址栏

            var maxWidth = 480;
            var maxHeight = 440;
            var initalWidth = $("#game").attr("width");
            var initalHeight = $("#game").attr("height");
            var handleResize = function(){
                //获得窗口宽度和高度
                var w = window.innerWidth,h = window.innerHeight,newDim;

                console.log(w +"---" + h + "---" + newDim +"---" + initalWidth + "---" + initalHeight + "---" + (w <= maxWidth));

                if(w <= maxWidth){
                    newDim = {
                        width:Math.min(w,maxWidth),
                        height:Math.min(h,maxHeight)    
                    };
                    $("#game").css({"position":"absolute",left:0,top:0,"z-index":10000});
                    $("#container").css("width","auto");
                }else{
                    //
                    newDim = {
                        width:initalWidth,
                        height:initalHeight
                    };
                    $("#game").css("position","relative");
                    $("#container").css("width",maxWidth);
                }
                $("#game").attr(newDim);//让游戏知道页面大小
            };

            $(window).bind("resize",handleResize)
            handleResize();

            //阻止防止滚动、缩放。
            $(document).on("touchmove",function(event){
                event.preventDefault();
            });

        });

    </script>

</html>

2、去除地址栏

可以使用另一个技巧来获取更多一点的页面实际使用面积，那就是去除IOS设备上的地址栏，可以使用页面加载完之后稍稍滚动页面的招术来实现。

利用：

window.scrollTo(0,1)//去除地址栏

PS：只有在页面内容长于一整页时，这一招才奏效；那么，就出现问题了，地址栏的移除还会影响所获取的页面的 innerHeight。你希望画布的大小调整成占据整个页面，解决这一问题，可以简单的把容器元素的高度设置成一个比没有没有地址栏情况下的最终高度还要大得已知值，然后滚动窗口，来重新计算 innerHeight。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>处理尺寸调整</title>
    </head>
    <style>
        body{margin: 0 auto;overflow-x: hidden;}
        #container{margin:0 auto;width:480px;height: 100%;}
        canvas{background-color:#04be02;}
    </style>
    <script src="../build/jquery.min.js"></script>
    <script src="vconsole.min.js"></script>

    <body>
        <div id="container">
            <canvas id="game" width="480" height="480"></canvas>
        </div>
    </body>
    <script> 
        //去除地址栏，等待document.ready回调
        $(function(){

            var maxWidth = 480;
            var maxHeight = 480;
            var initalWidth = $("#game").attr("width");
            var initalHeight = $("#game").attr("height");
            var touchDevice = !!('ontouchstart' in document);

            var handleResize = function(){
                //获得窗口宽度和高度
                var w = window.innerWidth,h = window.innerHeight,newDim;

                console.log("w:"+w +"---h:" + h  +"---initalWidth:" + initalWidth + "---initalHeight:" + initalHeight + "---" + (w <= maxWidth));

                //确保内容比页面大
                if(w <= maxWidth && touchDevice){
                    $("#container").css({height : h * 2});
                }

                window.scrollTo(0,1)//去除地址栏

                //得到的高度了，scrollto可能已经改变了innerheight
                h = window.innerHeight;
                if(w <= maxWidth){
                    newDim = {
                        width:Math.min(w,maxWidth),
                        height:Math.min(h,maxHeight)    
                    };
                    $("#game").css({"position":"absolute",left:0,top:0});
                    $("#container").css("width","auto");
                }else{
                    //
                    newDim = {
                        width:initalWidth,
                        height:initalHeight
                    };
                    $("#game").css("position","relative");
                    $("#container").css("width",maxWidth);
                }
                $("#game").attr(newDim);//让游戏知道页面大小

            };
            var resizeEvent = touchDevice ? 'orientationchange' : 'resize';//用来判断是
            $(window).on(resizeEvent,handleResize)

            //阻止防止滚动、缩放。
            $(document).on("touchmove",function(event){
                event.preventDefault();
            }); 
            handleResize();

        });

    </script>

</html>