Kann nicht auf Fensterbreite/-höhe im Canvas verweisen

Ich bin ein Neuling zu HTML/Css/Js und versuche, Canvas zu lernen. Ich möchte eine Leinwand machen, die die Größe des Fensters hat, egal wie groß das Fenster ist, dann möchte ich ein zusätzliches Rechteck innerhalb dieses Fensters zeichnen, um mit dem Zeichnen eines Labyrinth-Spiels zu beginnen. Ich habe die Größe der Leinwand geändert, wobei das Fenster funktioniert, aber nur, indem ich den Überlauf des Körpers festlege: Versteckt (wenn ich diesen Satz nicht hatte, war die Höhe immer zu groß). Ich frage mich, ob das jetzt ein Problem verursacht. Wenn ich versuche, ein kleineres Rechteck im Hauptleinwandrechteck zu erstellen, setze ich die Rechteckbreite auf die Hälfte der Fenstergröße, aber es geht weit über den Bildschirm hinaus. Was mache ich falsch? Ich möchte nur, dass das Rechteck deutlich innerhalb des Umfangs der Hauptleinwand liegt, damit ich alle Kanten sehen kann.Kann nicht auf Fensterbreite/-höhe im Canvas verweisen

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:

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

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

Quelle

2016-05-13 user3597313

Vielleicht hat Ihr '' einige Polsterung? Hast du diesen Code irgendwo für uns testen? – Arg0n

Wenn Sie Ihre CSS eingerichtet haben richtig die Leinwand, um den gesamten physischen Bildschirm nehmen müssen (innerer Bildschirm) dann funktioniert das unten.

nicht grundsätzlich Fensterbreite und Höhe, Größe der Leinwand richtig mit CSS und verwenden Sie die Leinwand und client Höhe

$(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. verwenden Formatieren Sie Ihren Code besser beim nächsten Mal

Quelle

2016-05-13 15:26:03 QBM5

Kann nicht auf Fensterbreite/-höhe im Canvas verweisen

Antwort

Verwandte Themen