it-swarm.com.de

Passen Sie die Größe der HTML5-Leinwand an das Fenster an

Wie kann ich das HTML5-Element <canvas> automatisch an die Seite anpassen?

Zum Beispiel kann ich ein <div> zum Skalieren erhalten, indem ich die height- und width -Eigenschaften auf 100% setze. Ein <canvas> wird jedoch nicht skaliert, oder?

357
devyn

Ich glaube, ich habe eine elegante Lösung dafür 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;
}

Hat bisher keine großen negativen Auswirkungen auf die Performance für mich gehabt.

337
devyn

Die folgende Lösung hat für mich am besten funktioniert. Da ich mit Codieren noch relativ neu bin, möchte ich gerne visuell bestätigen, dass etwas so funktioniert, wie ich es erwartet habe. Ich habe es auf folgender Website gefunden: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

Hier ist der Code:

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Resize HTML5 canvas dynamically | www.htmlcheats.com</title>
    <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      border: 0;
      overflow: hidden; /*  Disable scrollbars */
      display: block;  /* No floating content on sides */
    }
    </style>
</head>

<body>
    <canvas id='c' style='position:absolute; left:0px; top:0px;'>
    </canvas>

    <script>
    (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();
        }
    })();

    </script>
</body> 
</html>

Die blaue Umrandung zeigt den Rand der Leinwand, der die Größe ändert, und ist immer am Rand des Fensters sichtbar, auf allen vier Seiten sichtbar. Dies war bei einigen der obigen Antworten NICHT der Fall. Ich hoffe es hilft.

49
Craig Morrison

Grundsätzlich müssen Sie das Onresize-Ereignis an Ihren Körper binden. Sobald Sie das Ereignis erfasst haben, müssen Sie lediglich die Größe der Leinwand mithilfe von 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>
20
equiman

Wenn Sie die Breite und Höhe des Koordinatenbereichs für den Leinwandbereich basierend auf den Abmessungen des Browser-Clients festlegen möchten, müssen Sie die Größe und den Bereich des Browsers ändern, wenn Sie die Größe des Browsers ändern. 

Eine weniger komplizierte Lösung besteht darin, die zu zeichnenden Bemaßungen in Javascript-Variablen beizubehalten, die Bemaßungen der Leinwand jedoch auf der Grundlage des Bildschirms festzulegen. Verwenden Sie CSS, um zu passen:

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
} 

Das Browserfenster ist im Allgemeinen nie größer als der Bildschirm selbst (außer wenn die Bildschirmauflösung falsch angezeigt wird, wie dies bei nicht übereinstimmenden zwei Monitoren der Fall sein könnte), so dass der Hintergrund nicht angezeigt wird und die Pixelanteile nicht variieren. Die Pixel der Leinwand sind direkt proportional zur Bildschirmauflösung, sofern Sie die Leinwand nicht mit CSS skalieren. 

18
jerseyboy

Ein pure CSS -Ansatz, der die Lösung von @jerseyboy oben ergänzt.
Funktioniert in Firefox (getestet in Version 29), Chrome (getestet in Version 34) und Internet Explorer (getestet in Version 11).

<!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 feststellt:

Die Neuskalierung der Leinwand mit CSS ist mühsam. Zumindest auf Chrome und Safari-, Maus-/Berührungsereignispositionen entsprechen nicht 1: 1 mit Canvas-Pixelpositionen, und Sie müssen die Koordinate transformieren Systeme.

10
Volker E.

Wenn Sie nicht möchten, dass die Leinwand Ihre Bilddaten automatisch hochskaliert (dies ist die Antwort von James Black, die aber nicht schön aussieht), müssen Sie die Größe selbst anpassen und das Bild neu zeichnen. Eine Leinwand zentrieren

8
Nickolay
function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);
8
Petr

Wenn Ihr Div die Webseite vollständig ausgefüllt hat, können Sie dieses Div auffüllen und so eine Leinwand haben, die das Div ausfüllt.

Dies kann interessant sein, da Sie möglicherweise eine css verwenden müssen, um Prozentsatz zu verwenden. Dies hängt jedoch davon ab, welchen Browser Sie verwenden und wie viel davon mit der Spezifikation übereinstimmt: http: // www .whatwg.org/specs/web-apps/aktuelle arbeit/multipage/the-canvas-element.html # the-canvas-element

Die intrinsischen Abmessungen der Leinwand Element entspricht der Größe von Koordinatenraum mit den Zahlen interpretiert in CSS-Pixeln. Jedoch, Das Element kann beliebig dimensioniert werden von einem Stylesheet. Während des Renderns wird Das Bild wird entsprechend diesem Layout skaliert. Größe.

Möglicherweise müssen Sie die offsetWidth und die Höhe des divs ermitteln oder die Höhe und Breite des Fensters ermitteln und diese als Pixelwert festlegen.

4
James Black

Wenn Sie daran interessiert sind, Seitenverhältnisse beizubehalten und dies in reinem CSS (angesichts des Seitenverhältnisses) zu tun, können Sie wie folgt vorgehen. Der Schlüssel ist der padding-bottom im ::content-Element, der die Größe des container-Elements bestimmt. Diese Größe ist relativ zur Breite des übergeordneten Elements, standardmäßig 100%. Das hier angegebene Verhältnis muss mit dem Verhältnis der Größen auf dem Element canvas übereinstimmen.

// Javascript

var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');

context.fillStyle = '#ff0000';
context.fillRect(500, 200, 200, 200);

context.fillStyle = '#000000';
context.font = '30px serif';
context.fillText('This is some text that should not be distorted, just scaled', 10, 40);
/*CSS*/

.container {
  position: relative; 
  background-color: green;
}

.container::after {
  content: ' ';
  display: block;
  padding: 0 0 50%;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

canvas {
  width: 100%;
  height: 100%;
}
<!-- HTML -->

<div class=container>
  <div class=wrapper>
    <canvas width=1200 height=600></canvas>  
  </div>
</div>

3
mrmcgreg

CSS

body { margin: 0; } 
canvas { display: block; } 

JavaScript

window.addEventListener("load", function()
{
    var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
    var context = canvas.getContext('2d');

    function draw()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); 
        context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height); 
        context.stroke();
    }
    function resize()
    {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        draw();
    }
    window.addEventListener("resize", resize);
    resize();
});
2
Martin Wantke
(function() {

    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width:  window.innerWidth
        };
    };

    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        $('#myCanvas').width(viewportSize.width).height(viewportSize.height);
        $('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
    };

    // run on load
    updateSizes();

    // handle window resizing
    $(window).on('resize', function() {
        updateSizes();
    });

}());
1
lokers

Erstens können Sie die Attribute width und height nicht verwenden, um die Größe zu ändern (zumindest nicht auf meine Art), da dies zu Problemen führt. Sie können dies tun: HTML:

<canvas id = 'myCanvas'></canvas>

JS:

var canvas = document.getElementById('myCanvas');

var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

(Bitte verzeihen Sie mir Tippfehler, das mache ich oft.)

0
stonefish

Mit jQuery können Sie die Größe des Fensters nachverfolgen und die Breite Ihrer Leinwand auch mit jQuery ändern. 

Sowas in der Art

$( window ).resize(function() {
 		$("#myCanvas").width($( window ).width())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

0
Rafael Andrade

Ich denke, das sollten wir genau tun: http://www.html5rocks.com/de/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

function resizeGame() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }

    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';

    var gameCanvas = document.getElementById('gameCanvas');
    gameCanvas.width = newWidth;
    gameCanvas.height = newHeight;
}

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);
0
Arvind Bhardwaj