Pregunta Cambiar el tamaño del lienzo HTML5 para que se ajuste a la ventana


¿Cómo puedo escalar automáticamente el HTML5? <canvas> elemento para adaptarse a la página?

Por ejemplo, puedo obtener un <div> escalar estableciendo el height y width propiedades al 100%, pero una <canvas> no escalará, ¿verdad?


342
2017-11-03 02:02


origen


Respuestas:


Creo que he encontrado una solución elegante para esto:

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: 0px;
}

Hasta ahora no ha tenido un gran impacto en el rendimiento negativo para mí.


323
2018-06-20 06:43



La siguiente solución funcionó para mí lo mejor. Como soy relativamente nuevo en la codificación, me gusta tener una confirmación visual de que algo está funcionando como esperaba. Lo encontré en el siguiente sitio: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

Aquí está el código:

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

El borde azul le muestra el borde del lienzo de cambio de tamaño, y siempre está a lo largo del borde de la ventana, visible en los 4 lados, que NO fue el caso para algunas de las otras respuestas anteriores. Espero eso ayude.


43
2018-03-06 14:05



Básicamente, lo que tienes que hacer es vincular el evento onresize a tu cuerpo, una vez que captas el evento solo necesitas redimensionar el lienzo usando window.innerWidth y 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>

20
2017-09-08 22:18



Establecer el ancho y el alto del espacio de coordenadas del lienzo en función de las dimensiones del cliente del navegador requiere que cambie el tamaño y vuelva a dibujar cada vez que cambie el tamaño del navegador.

Una solución menos intrincada es mantener las dimensiones dibujables en las variables Javascript, pero establecer las dimensiones del lienzo en función de las dimensiones screen.width, screen.height. Use CSS para encajar:

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

La ventana del navegador generalmente no será más grande que la pantalla misma (excepto cuando la resolución de la pantalla no se informa correctamente, como podría ser con monitores duales que no coinciden), por lo que el fondo no se mostrará y las proporciones de píxeles no variarán. Los píxeles del lienzo serán directamente proporcionales a la resolución de la pantalla a menos que use CSS para escalar el lienzo.


18
2017-10-23 01:17



UN CSS puro enfoque de agregar a la solución de @jerseyboy anterior.
Funciona en Firefox (probado en v29), Chrome (probado en v34) e Internet Explorer (probado en 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>

Enlace al ejemplo: http://temporaer.net/open/so/140502_canvas-fit-to-window.html

Pero cuidado, como dice @jerseyboy en su comentario:

Cambiar el tamaño del lienzo con CSS es problemático. Al menos en Chrome y   Safari, las posiciones del evento mouse / touch no se corresponderán con 1: 1 con   posiciones de píxeles de lienzo, y tendrá que transformar las coordenadas   sistemas.


10
2018-05-02 18:51



A menos que desee que el lienzo actualice sus datos de imagen automáticamente (eso es de lo que habla la respuesta de James Black, pero no se verá bonita), tiene que cambiar el tamaño usted mismo y volver a dibujar la imagen. Centrar un lienzo


8
2017-11-04 13:52



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
2017-10-16 09:59