用js写适配手机的视窗代码，请大咖们指教。
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> (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
你这个canvas的border有影响
var game = new Game("#mycanvas"); 这个还是错误 ，无法执行。 {:10_289:}在我电脑上还行 可能是文件名你没改
页:
[1]