设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 用js写适配手机的视窗代码，请大咖们指教。
返回列表 发新帖
查看: 2118|回复: 3

[已解决]用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
  1. (function(window){
  2.         window.Game = function(id){
  3.                 //得到画布
  4.                 this.canvas = document.querySelector(id);//引用视口
  5.                 //上下文
  6.                 this.ctx = this.canvas.getContext("2d");
  7.                 //资源文件地址
  8.                 //this.Rjsonurl = params.Rjsonurl;
  9.                 //设置画布的宽度和高度
  10.                 this.init();
  11.                 //var self = this;
  12.                 //读取资源(运用回调函数指针指引)时异步函数，所以我们不知道什么时候///执行完毕。但是其他的事情必须等到他完毕之后再执行。必须用回调函数。
  13. //                this.loadAllResource(function(){
  14.                         //我们封装的回调函数，这里表示全部资源读取完毕
  15.         //                this.start();
  16.         //        });
  17.         }
  18.         //初始化，设置画布的宽度和高度
  19.         Game.prototype.init = function(){
  20.                 //读取视口的宽度和高度
  21.                 var windowW = document.documentElement.clientWidth;
  22.                 var windowH = document.documentElement.clientHeight;
  23.                 //让canvas匹配
  24.                 this.canvas.width = windowW-2;
  25.                 this.canvas.height = windowH-2;//这个2是你设置的border
  26.         }
  27. })(window);
复制代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>视窗设计练习</title>
  6. <!-- //视口标签 -->
  7.         <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" id= "viewport"/>
  8.         <style type="text/css">
  9.             *{
  10.                 margin: 0;
  11.                 padding:0;
  12.             }
  13.             body{
  14.                 overflow: hidden;
  15.             }
  16.             canvas{
  17.                  border:1px solid #000000;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.     <canvas id="mycanvas"></canvas>
  23.     <script type="text/javascript" src="./a.js"></script>
  24.     <script type="text/javascript">
  25.         var game = new Game("#mycanvas");
  26.     </script>
  27.     </body>
  28. </html>
复制代码


你这个canvas的border有影响
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

kogawananari
发表于 2020-10-18 21:51:21 | 显示全部楼层    本楼为最佳答案   
  1. (function(window){
  2.         window.Game = function(id){
  3.                 //得到画布
  4.                 this.canvas = document.querySelector(id);//引用视口
  5.                 //上下文
  6.                 this.ctx = this.canvas.getContext("2d");
  7.                 //资源文件地址
  8.                 //this.Rjsonurl = params.Rjsonurl;
  9.                 //设置画布的宽度和高度
  10.                 this.init();
  11.                 //var self = this;
  12.                 //读取资源(运用回调函数指针指引)时异步函数，所以我们不知道什么时候///执行完毕。但是其他的事情必须等到他完毕之后再执行。必须用回调函数。
  13. //                this.loadAllResource(function(){
  14.                         //我们封装的回调函数，这里表示全部资源读取完毕
  15.         //                this.start();
  16.         //        });
  17.         }
  18.         //初始化，设置画布的宽度和高度
  19.         Game.prototype.init = function(){
  20.                 //读取视口的宽度和高度
  21.                 var windowW = document.documentElement.clientWidth;
  22.                 var windowH = document.documentElement.clientHeight;
  23.                 //让canvas匹配
  24.                 this.canvas.width = windowW-2;
  25.                 this.canvas.height = windowH-2;//这个2是你设置的border
  26.         }
  27. })(window);
复制代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>视窗设计练习</title>
  6. <!-- //视口标签 -->
  7.         <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" id= "viewport"/>
  8.         <style type="text/css">
  9.             *{
  10.                 margin: 0;
  11.                 padding:0;
  12.             }
  13.             body{
  14.                 overflow: hidden;
  15.             }
  16.             canvas{
  17.                  border:1px solid #000000;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.     <canvas id="mycanvas"></canvas>
  23.     <script type="text/javascript" src="./a.js"></script>
  24.     <script type="text/javascript">
  25.         var game = new Game("#mycanvas");
  26.     </script>
  27.     </body>
  28. </html>
复制代码


你这个canvas的border有影响
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

heroking146
 楼主| 发表于 2020-10-19 20:29:28 | 显示全部楼层
kogawananari 发表于 2020-10-18 21:51
你这个canvas的border有影响

var game = new Game("#mycanvas");   这个还是错误 ，无法执行。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

kogawananari
发表于 2020-10-19 22:36:04 | 显示全部楼层
在我电脑上还行 可能是文件名你没改
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-19 14:47

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表