Zmień rozmiar płótna HTML5, aby dopasować okno

400

Jak mogę automatycznie skalować <canvas>element HTML5 , aby pasował do strony?

Na przykład mogę uzyskać <div>skalowanie, ustawiając właściwości heighti widthna 100%, ale <canvas>nie będzie skalować, prawda?

javascript html html5-canvas devyn
źródło
7
dlaczego płótno {szerokość: 100%; wysokość: 100%} nie działa?
zloctb
28
@zloctb - To przeskaluje płótno bezpośrednio, co rozciąga twój obraz.
Derek 朕 會 功夫
8
Zobacz podstawy WebGL, aby uzyskać szczegółowe wyjaśnienie tego, co i czego nie należy robić w przypadku powiązanych problemów.
legends2k
2
Płótno również dobrze się skaluje, po prostu dodaj css {szerokość: 100%}, jego zawartość nie będzie, ale to zupełnie inna sprawa!
ejectamenta

Odpowiedzi:

372

Myślę, że znalazłem eleganckie rozwiązanie tego:

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

Do tej pory nie miał dla mnie dużego negatywnego wpływu na wydajność.

devyn
źródło
7
Prawdopodobnie musisz wyłączyć margines za pomocąbody, html { margin: 0px;}
Nicklas A.
45
Czy jest to lepsze niż słuchanie zdarzenia zmiany rozmiaru?
Eric
25
@Elisabeth: Aby pozbyć się pasków przewijania, dodaj styl „przepełnienie: ukryty” do stylu elementów HTML i body. Zobacz thefutureoftheweb.com/blog/100-percent-height-interface
Denis Washington
17
Zrobiłem to, a także ustawiłem płótno do wyświetlania: blok (wydawało się, że domyślnie wyświetla się: inline, który tworzył dodatkową przestrzeń!).
Elisabeth,
15
Może to być anty-wzór; zobacz trzeci punkt tutaj, aby zobaczyć przyczynę i rozwiązanie.
legends2k
67

Poniższe rozwiązanie działało dla mnie najlepiej. Ponieważ jestem stosunkowo nowy w programowaniu, lubię mieć wizualne potwierdzenie, że coś działa tak, jak tego oczekuję. Znalazłem go na następującej stronie: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

Oto kod:

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

Niebieska ramka pokazuje krawędź płótna zmiany rozmiaru i jest zawsze wzdłuż krawędzi okna, widoczna ze wszystkich 4 stron, co NIE było w przypadku niektórych z powyższych odpowiedzi. Mam nadzieję, że to pomoże.

Craig Morrison
źródło
Ta odpowiedź rozwiązała mój problem. overflow: hiddenI display: blockto czego brakuje dla mnie to działa prawidłowo.
Deathicon
1
Link jest zepsuty
Nic Scozzaro,
22

Zasadniczo musisz powiązać zdarzenie onresize ze swoim ciałem, gdy złapiesz zdarzenie, wystarczy zmienić rozmiar płótna za pomocą window.innerWidth i window.innerHeight.

<!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>
Equiman
źródło
1
Możesz po prostu użyć detektora zdarzeń.
David Corbin
Ma to marginesy i pokazuje paski przewijania, a ponadto musisz zmienić rozmiar ekranu, zanim cokolwiek zrobi.
ArtOfWarfare
Co się stanie, jeśli obszar roboczy jest większy niż rzutnia (podczas zmniejszania lub zmniejszania widoku)? To rozwiązanie nie radzi sobie z tym.
Lars Gyrup Brink Nielsen
@ArtOfWarfare oryginalne pytania nie wspominają o stylach. Ale możesz stylizować go za pomocą css i usuwać marginesy i ukrywać paski przewijania, jeśli chcesz. Możesz po prostu dodać `<body onload =" resize_canvas () ">`, a następnie, gdy ładowanie strony, następnie zmień rozmiar płótna.
equiman
@LayZee oryginalne pytanie powiedzmy o skalowaniu płótna, aby pasowało do strony , a nie do rzutni. To może być kolejne pytanie.
equiman
19

Ustawienie szerokości i wysokości współrzędnych obszaru roboczego na podstawie wymiarów klienta przeglądarki wymaga zmiany rozmiaru i przerysowania przy każdym zmianie rozmiaru przeglądarki.

Mniej skomplikowanym rozwiązaniem jest utrzymanie wymiarów do rysowania w zmiennych JavaScript, ale ustawienie wymiarów obszaru roboczego na podstawie wymiarów screen.width, screen.height. Użyj CSS, aby dopasować:

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

Okno przeglądarki zasadniczo nigdy nie będzie większe niż sam ekran (z wyjątkiem sytuacji, w których rozdzielczość ekranu jest nieprawidłowo zgłaszana, tak jak w przypadku niepasujących podwójnych monitorów), więc tło nie będzie się wyświetlać, a proporcje pikseli nie będą się różnić. Piksele płótna będą wprost proporcjonalne do rozdzielczości ekranu, chyba że użyjesz CSS do skalowania płótna.

jerseyboy
źródło
7
Przeskalowanie płótna za pomocą CSS jest kłopotliwe. Przynajmniej w Chrome i Safari pozycje zdarzeń myszy / dotyku nie będą odpowiadały 1: 1 pozycjom kanwy pikseli i będziesz musiał przekształcić układ współrzędnych.
jerseyboy
14

Czystym CSS podejście dodanie do roztworu @jerseyboy powyżej.
Działa w Firefox (testowany w wersji 29), Chrome (testowany w wersji 34) i Internet Explorer (testowany w wersji 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 do przykładu: http://temporaer.net/open/so/140502_canvas-fit-to-window.html

Ale uważaj, jak pisze @jerseyboy w swoim komentarzu:

Przeskalowanie płótna za pomocą CSS jest kłopotliwe. Przynajmniej w Chrome i Safari pozycje zdarzeń myszy / dotyku nie będą odpowiadały 1: 1 pozycjom kanwy pikseli i będziesz musiał przekształcić układ współrzędnych.

Volker E.
źródło
5
Sposób CSS rozciąga płótno, dzięki czemu renderowane obrazy są rozciągane. Nie jest to dobre w porównaniu do zmiany rozmiaru płótna. Przy niewielkim dostosowaniu odpowiedź Craiga działa najlepiej.
Nayan
Podoba mi się to rozwiązanie, ponieważ sprawia, że ​​płótno jest w 100% oparte na szerokości rodzica.
Maihan Nijat
9 
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);
Petr
źródło
Fajnie, gdy stosunek jest ważny
sarkiroka
8

O ile nie chcesz, aby płótno automatycznie skalowało dane obrazu (o tym mówi odpowiedź Jamesa Blacka, ale nie będzie ładnie wyglądać), musisz sam zmienić jego rozmiar i przerysować obraz. Centrowanie płótna

Nickolay
źródło
4

Jeśli Twój div całkowicie wypełnił stronę, możesz wypełnić ten div, a więc mieć płótno, które wypełni div.

To może być interesujące, ponieważ może być konieczne użycie css, aby użyć wartości procentowej, ale zależy to od używanej przeglądarki i tego, ile zgadza się ze specyfikacją: http://www.whatwg.org/ specs / web-apps / current-work / multipage / the-canvas-element.html # the-canvas-element

Wewnętrzne wymiary elementu canvas są równe rozmiarowi przestrzeni współrzędnych, z liczbami interpretowanymi w pikselach CSS. Element można jednak dowolnie wymiarować według arkusza stylów. Podczas renderowania obraz jest skalowany w celu dopasowania do tego rozmiaru układu.

Może być konieczne uzyskanie offsetWidth i wysokości div lub uzyskanie wysokości / szerokości okna i ustawienie go jako wartości w pikselach.

James Black
źródło
3

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();
});
Martin Wantke
źródło
3

Jeśli chcesz zachować proporcje i zrobić to w czystym CSS (biorąc pod uwagę proporcje), możesz zrobić coś takiego jak poniżej. Kluczem jest padding-bottomna ::contentelement, który dopasowuje containerelement. Jest on dostosowywany do szerokości jego rodzica, która jest 100%domyślnie. Podany tutaj współczynnik musi być zgodny ze stosunkiem rozmiarów nacanvas elementu.

// 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>
Rozwiń fragment kodu

mrmcgreg
źródło
2

Za pomocą jQuery można śledzić zmianę rozmiaru okna i zmieniać szerokość płótna, również przy użyciu jQuery.

Coś w tym stylu

$( 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;">
Rozwiń fragment kodu

Rafael Andrade
źródło
1 
(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();
    });

}());
lokers
źródło
0

Myślę, że właśnie to powinniśmy zrobić: http://www.html5rocks.com/en/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);
Arvind Bhardwaj
źródło
-2

Korzystam z sketch.js, więc po uruchomieniu komendy init dla obszaru roboczego zmieniam szerokość i wysokość za pomocą jquery. Opiera wymiary na elemencie nadrzędnym.

$ ('# DrawCanvas'). Sketch (). Attr ('height', $ ('# DrawCanvas'). Parent (). Height ()). Attr ('width', $ ('# DrawCanvas'). Parent ().szerokość());

moeiscool
źródło