Wie kann ich die HTML5-Datei automatisch skalieren? <canvas> Element an die Seite anpassen?
Ich kann zum Beispiel eine <div> zu skalieren, indem Sie den Wert height y width Eigenschaften auf 100 %, aber eine <canvas> lässt sich nicht skalieren, oder?
Ich glaube, ich habe eine elegante Lösung für dieses Problem gefunden:
JavaScript
/* important! for alignment, you should make things
* relative to the canvas' current width/height.
*/
function draw() {
var ctx = (a canvas context);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//...drawing code...
}CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
}Bei mir hat das bisher keine großen negativen Auswirkungen auf die Leistung gehabt.
Die folgende Lösung hat bei mir am besten funktioniert. Da ich relativ neu in der Programmierung bin, habe ich gerne eine visuelle Bestätigung, dass etwas so funktioniert, wie ich es erwarte. Ich habe sie auf der folgenden Website gefunden: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/
Hier ist der Code:
(function() {
var
// Obtain a reference to the canvas element using its id.
htmlCanvas = document.getElementById('c'),
// Obtain a graphics context on the canvas element for drawing.
context = htmlCanvas.getContext('2d');
// Start listening to resize events and draw canvas.
initialize();
function initialize() {
// Register an event listener to call the resizeCanvas() function
// each time the window is resized.
window.addEventListener('resize', resizeCanvas, false);
// Draw canvas border for the first time.
resizeCanvas();
}
// Display custom canvas. In this case it's a blue, 5 pixel
// border that resizes along with the browser window.
function redraw() {
context.strokeStyle = 'blue';
context.lineWidth = '5';
context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}
// Runs each time the DOM window resize event fires.
// Resets the canvas dimensions to match window,
// then draws the new borders accordingly.
function resizeCanvas() {
htmlCanvas.width = window.innerWidth;
htmlCanvas.height = window.innerHeight;
redraw();
}
})();
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden;
/* Disable scrollbars */
display: block;
/* No floating content on sides */
}
<canvas id='c' style='position:absolute; left:0px; top:0px;'></canvas>Der blaue Rand zeigt Ihnen den Rand der Größenanpassung und ist immer am Rand des Fensters entlang auf allen 4 Seiten sichtbar, was bei einigen der oben genannten Antworten NICHT der Fall war. Ich hoffe, das hilft.
Grundsätzlich müssen Sie das onresize-Ereignis an Ihren Body binden. Sobald Sie das Ereignis abfangen, müssen Sie nur noch die Größe der Leinwand mit window.innerWidth und window.innerHeight ändern.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Canvas Resize</title>
<script type="text/javascript">
function resize_canvas(){
canvas = document.getElementById("canvas");
if (canvas.width < window.innerWidth)
{
canvas.width = window.innerWidth;
}
if (canvas.height < window.innerHeight)
{
canvas.height = window.innerHeight;
}
}
</script>
</head>
<body onresize="resize_canvas()">
<canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>
Wenn Sie die Breite und Höhe des Canvas-Koordinatenbereichs auf der Grundlage der Abmessungen des Browser-Clients festlegen, müssen Sie die Größe bei jeder Größenänderung des Browsers ändern und neu zeichnen.
Eine weniger komplizierte Lösung besteht darin, die zeichenbaren Abmessungen in Javascript-Variablen beizubehalten, aber die Leinwandabmessungen auf der Grundlage der Abmessungen screen.width, screen.height festzulegen. Verwenden Sie CSS zur Anpassung:
#containingDiv {
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
} Das Browser-Fenster wird in der Regel nie größer sein als der Bildschirm selbst (es sei denn, die Bildschirmauflösung wird falsch angegeben, wie es bei nicht übereinstimmenden Doppelmonitoren der Fall sein könnte), so dass der Hintergrund nicht sichtbar ist und die Pixelproportionen nicht variieren. Die Pixel der Leinwand sind direkt proportional zur Bildschirmauflösung, es sei denn, Sie verwenden CSS zur Skalierung der Leinwand.
A reines CSS Ansatz, der die Lösung von @jerseyboy oben ergänzt.
Funktioniert in Firefox (getestet in v29), Chrome (getestet in v34) und Internet Explorer (getestet in v11).
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
canvas {
background-color: #ccc;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
</script>
</body>
</html>Link zum Beispiel: http://temporaer.net/open/so/140502_canvas-fit-to-window.html
Aber seien Sie vorsichtig, wie @jerseyboy in seinem Kommentar schreibt:
Die Skalierung der Leinwand mit CSS ist mühsam. Zumindest bei Chrome und Safari entsprechen die Maus-/Touch-Event-Positionen nicht 1:1 den Canvas-Pixelpositionen, und Sie müssen die Koordinatensysteme transformieren Systeme transformieren.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
