キャンバスのウィンドウの幅/高さを参照できません

私はhtml/css/jsの初心者で、キャンバスを学ぼうとしています。ウィンドウのサイズに関係なく、ウィンドウのサイズであるキャンバスを作成したいと思っています。そして、そのウィンドウ内に迷路ゲームの描画を開始するための矩形を追加したいと思います。私はキャンバスをウィンドウでサイズ変更しましたが、ボディのオーバーフローを設定するだけです：隠されたとき（私はそのセットを持たなかったとき、高さは常に大きかった）。これが問題を引き起こしているのかどうか疑問に思います。メインキャンバスの矩形の内側に小さな矩形を作成しようとすると、矩形の幅をウィンドウのサイズの半分に設定しますが、画面からはるか遠ざかります。私は間違って何をしていますか？私はちょうどメインキャンバスの境界内に矩形がはっきりとしているように、すべてのエッジを見ることができます。キャンバスのウィンドウの幅/高さを参照できません

JS：

$(document).ready(function() { 

var ctx; 
var ww; 
var wh; 

drawcanvas(); 

$(window).resize(function() { 
ctx.clearRect(0, 0, ww, wh); //won't this clear only the bottom  rectangle? 
drawcanvas(); 
}); 



function drawcanvas() { 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ww = window.innerWidth; 
wh = window.innerHeight; 

ctx.canvaswidth = ww; 
ctx.canvas.height = wh; 
ctx.fillStyle ="blue"; 
ctx.fillRect(0, 0, ww, wh); 

ctx.strokeStyle = 'orange'; 
ctx.strokeRect(10, 20, ww/2, wh/2); 

} 



});

HTML：

<html> 
<head> 
<link href="maze2.css" rel="stylesheet" type="text/css"/> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript" ></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> 


<script src="maze2.js" type="text/javascript"></script> 
<title>Maze</title> 
</head> 




<body> 


<canvas id="canvas">Your browser does not support Canvas.</canvas> 



</body> 
</html>

CSS：あなたはキャンバス全体の物理的な画面を取る持って正しくCSSを設定している場合は

body { 
width: 100%; 
height: 100%; 
margin:0px; 
overflow:hidden; 
} 

#canvas { 
width:100%; 
height:100%; 
margin:0px; 
}

出典

2016-05-13 user3597313

多分あなたの ''にはいくつかの詰め物がありますか？このコードはどこかでテストするのですか？ – Arg0n

（内側の画面）、次のように動作します。

は基本的に適切にCSSでウィンドウの幅と高さ、サイズキャンバスを使用して、キャンバスclientWidthと高

$(document).ready(function() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var cW; 
    var cH; 
    size(); 
    drawcanvas(); 

    $(window).resize(function() { 
     size(); 
     drawcanvas(); 
    }); 

    function size(){ 
     cW = canvas.clientWidth; // if you did your css correctly this will work 
     cH = canvas.clientHeight; 
     canvas.width = cW, // if the size has changed the canvas will be blanked out automatically 
     canvas.height = cH; 
    } 

    function drawcanvas() { 
    ctx.fillStyle ="blue"; 
    ctx.fillRect(0, 0, cW, cH); 

    ctx.strokeStyle = 'orange'; 
    ctx.strokeRect(10, 20, cW/2, cH/2); 

    } 
});

P.S.を使用いけません次回はあなたのコードをより良くフォーマットしてください

出典

2016-05-13 15:26:03 QBM5

キャンバスのウィンドウの幅/高さを参照できません

答えて

関連する問題