[已解决]用js写适配手机的视窗代码，请大咖们指教。

heroking146 · 发表于 2020-10-18 21:31:32

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

show.js视窗初始化代码：//希望大咖帮我修改成为可以适配手机视窗的代码，谢谢。
(function(){
var Game = window.Game = function(id){
//得到画布
this.canvas = document.querySelector(id);//引用视口
//上下文
this.ctx = this.canvas.getContext("2d");
//资源文件地址
//this.Rjsonurl = params.Rjsonurl;
//设置画布的宽度和高度
this.init();
//var self = this;
//读取资源(运用回调函数指针指引)时异步函数，所以我们不知道什么时候///执行完毕。但是其他的事情必须等到他完毕之后再执行。必须用回调函数。
// this.loadAllResource(function(){
//我们封装的回调函数，这里表示全部资源读取完毕
// this.start();
// });
}
//初始化，设置画布的宽度和高度
Game.prototype.init = function(){
//读取视口的宽度和高度
var windowW = document.documentElement.clientWidth;
var windowH = document.documentElement.clientHeight;

//验收
if(windowW>414){
windowW = 414;
}else if(windowW <320){
windowW = 320;
}
//736
if(windowH>680){
windowH =500;
}else if(windowH<500){
windowH = 500;
}
//让canvas匹配
// this.canvas.width = windowW;
// this.canvas.height = windowH;

)}();

html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>视窗设计练习</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" id= "viewport"/>
<style type="text/css">
*{
margin: 0;
padding:0;
}
body{
overflow: hidden;
}
canvas{
border:1px solid #000000;
}
</style>
</head>
<body>
<canvas id ="mycanvas"></canvas>
<script type="text/javascript" src="./show.js"></script>
<script type="text/javascript">
var game = new game ("mycanvas");
</script>
</body>
</html>

最佳答案

月排行榜 / 总排行榜

kogawananari

2020-10-18 21:51:21

(function(window){
        window.Game = function(id){
                //得到画布
                this.canvas = document.querySelector(id);//引用视口
                //上下文
                this.ctx = this.canvas.getContext("2d");
                //资源文件地址
                //this.Rjsonurl = params.Rjsonurl;
                //设置画布的宽度和高度
                this.init();
                //var self = this;
                //读取资源(运用回调函数指针指引)时异步函数，所以我们不知道什么时候///执行完毕。但是其他的事情必须等到他完毕之后再执行。必须用回调函数。
//                this.loadAllResource(function(){
                        //我们封装的回调函数，这里表示全部资源读取完毕
        //                this.start();
        //        });
        }
        //初始化，设置画布的宽度和高度
        Game.prototype.init = function(){
                //读取视口的宽度和高度
                var windowW = document.documentElement.clientWidth;
                var windowH = document.documentElement.clientHeight;
                //让canvas匹配
                this.canvas.width = windowW-2;
                this.canvas.height = windowH-2;//这个2是你设置的border
        }
})(window);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>视窗设计练习</title>
<!-- //视口标签 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" id= "viewport"/>
        <style type="text/css">
            *{
                margin: 0;
                padding:0;
            }
            body{
                overflow: hidden;
            }
            canvas{
                 border:1px solid #000000;
            }
        </style>
    </head>
    <body>
    <canvas id="mycanvas"></canvas>
    <script type="text/javascript" src="./a.js"></script>
    <script type="text/javascript">
        var game = new Game("#mycanvas");
    </script>
    </body>
</html>

你这个canvas的border有影响

跳转到最佳答案楼层

kogawananari · 发表于 2020-10-18 21:51:21

这个最佳答案由 kogawananari 给出，感谢 kogawananari 的回答。

单击隐藏图章

(function(window){
        window.Game = function(id){
                //得到画布
                this.canvas = document.querySelector(id);//引用视口
                //上下文
                this.ctx = this.canvas.getContext("2d");
                //资源文件地址
                //this.Rjsonurl = params.Rjsonurl;
                //设置画布的宽度和高度
                this.init();
                //var self = this;
                //读取资源(运用回调函数指针指引)时异步函数，所以我们不知道什么时候///执行完毕。但是其他的事情必须等到他完毕之后再执行。必须用回调函数。
//                this.loadAllResource(function(){
                        //我们封装的回调函数，这里表示全部资源读取完毕
        //                this.start();
        //        });
        }
        //初始化，设置画布的宽度和高度
        Game.prototype.init = function(){
                //读取视口的宽度和高度
                var windowW = document.documentElement.clientWidth;
                var windowH = document.documentElement.clientHeight;
                //让canvas匹配
                this.canvas.width = windowW-2;
                this.canvas.height = windowH-2;//这个2是你设置的border
        }
})(window);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>视窗设计练习</title>
<!-- //视口标签 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" id= "viewport"/>
        <style type="text/css">
            *{
                margin: 0;
                padding:0;
            }
            body{
                overflow: hidden;
            }
            canvas{
                 border:1px solid #000000;
            }
        </style>
    </head>
    <body>
    <canvas id="mycanvas"></canvas>
    <script type="text/javascript" src="./a.js"></script>
    <script type="text/javascript">
        var game = new Game("#mycanvas");
    </script>
    </body>
</html>

你这个canvas的border有影响

heroking146 · 发表于 2020-10-19 20:29:28

kogawananari 发表于 2020-10-18 21:51
你这个canvas的border有影响

var game = new Game("#mycanvas"); 这个还是错误，无法执行。

kogawananari · 发表于 2020-10-19 22:36:04

在我电脑上还行可能是文件名你没改

账号		自动登录	找回密码
密码			立即注册