Größe der HTML5-Leinwand an das Fenster anpassen

Question

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?

Answer 1

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);

Answer 2

Anfangsgröße einstellen.

const canvas = document.getElementById('canvas');

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

Aktualisieren Sie die Größe beim Ändern der Fenstergröße.

function windowResize() {
  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', windowResize);

Answer 3

Wenn Sie nicht wollen, dass der Canvas Ihre Bilddaten automatisch hochskaliert (davon ist in der Antwort von James Black die Rede, aber das sieht nicht schön aus), müssen Sie die Größe selbst ändern und das Bild neu zeichnen. Zentrieren einer Leinwand

Answer 4

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

Das könnte für Sie interessant sein, da Sie möglicherweise ein css verwenden müssen, um den Prozentsatz zu verwenden, aber es hängt davon ab, welchen Browser Sie verwenden und inwieweit er mit der Spezifikation übereinstimmt: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Die intrinsischen Dimensionen der Leinwand Elements entsprechen der Größe des Koordinatenraums, wobei die Zahlen in CSS-Pixel interpretiert werden. Jedoch, kann die Größe des Elements beliebig durch ein Stylesheet. Während des Renderns, wird das Bild so skaliert, dass es in diese Layout Größe.

Möglicherweise müssen Sie die offsetWidth und Höhe des div zu erhalten, oder erhalten Sie die Höhe / Breite des Fensters und setzen, dass als der Pixelwert.

Answer 5

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