html - div - Centrar un lienzo

title html css

Question

¿Cómo puedo marcar una página con un canvas HTML5 tal que el canvas

1. Toma el 80% del ancho

2. Tiene una altura y un ancho de píxel correspondientes que definen efectivamente la relación (y se mantienen proporcionalmente cuando el lienzo se estira al 80%)

3. Se centra tanto vertical como horizontalmente

Puede suponer que el canvas es lo único en la página, pero siéntase libre de encapsularlo en div s si es necesario.

Answer 1

la manera más fácil

pon el lienzo en etiquetas de párrafo como esta:

<p align="center">
  <canvas id="myCanvas" style="background:#220000" width="700" height="500" align="right"></canvas>
</p>

Answer 2

Al mirar las respuestas actuales, siento que falta una solución fácil y limpia. En caso de que alguien pase por allí y busque la solución adecuada. Tengo bastante éxito con algunos CSS simples y javascript.

Centre el lienzo a la mitad de la pantalla o elemento principal. Sin envoltura.

HTML:

<canvas id="canvas" width="400" height="300">No canvas support</canvas>

CSS:

#canvas {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
}

Javascript:

window.onload = window.onresize = function() {
    var canvas = document.getElementById(''canvas'');
    canvas.width = window.innerWidth * 0.8;
    canvas.height = window.innerHeight * 0.8;
}

Funciona como un encanto probado: firefox, cromo

violín: http://jsfiddle.net/djwave28/j6cffppa/3/

Answer 3

Cambiar el tamaño del lienzo usando CSS no es una buena idea. Debería hacerse usando Javascript. Vea la función a continuación que lo hace

function setCanvas(){

   var canvasNode = document.getElementById(''xCanvas'');

   var pw = canvasNode.parentNode.clientWidth;
   var ph = canvasNode.parentNode.clientHeight;

   canvasNode.height = pw * 0.8 * (canvasNode.height/canvasNode.width);  
   canvasNode.width = pw * 0.8;
   canvasNode.style.top = (ph-canvasNode.height)/2 + "px";
   canvasNode.style.left = (pw-canvasNode.width)/2 + "px";


}

demo aquí: http://jsfiddle.net/9Rmwt/11/show/

.

Answer 4

Dado que el lienzo no es nada sin JavaScript, use JavaScript también para dimensionar y posicionar (ya sabe: onresize , position:absolute , etc.)

Answer 5

En cuanto a la sugerencia de CSS:

#myCanvas { 
 width: 100%;
 height: 100%;
}

Según el estándar, CSS no dimensiona el sistema de coordenadas del lienzo, sino que escala el contenido. En Chrome, el CSS mencionado escalará el lienzo hacia arriba o hacia abajo para ajustarse al diseño del navegador. En el caso típico en que el sistema de coordenadas es más pequeño que las dimensiones del navegador en píxeles, esto efectivamente reduce la resolución de su dibujo. Lo más probable es que resulte en un dibujo no proporcional también.

Answer 6

Envolverlo con div debería funcionar. Lo probé en Firefox, Chrome en Fedora 13 ( demo ).

#content {
   width: 95%;
   height: 95%;
   margin: auto;
}

#myCanvas {
   width: 100%;
   height: 100%;
   border: 1px solid black;
}

Y el lienzo debe incluirse en la etiqueta

<div id="content">
    <canvas id="myCanvas">Your browser doesn''t support canvas tag</canvas>
</div>

Déjame saber si funciona. Aclamaciones.

Answer 7

Esto centrará el lienzo horizontalmente:

#canvas-container {
   width: 100%;
   text-align:center;
}

canvas {
   display: inline;
}

HTML:

<div id="canvas-container">
   <canvas>Your browser doesn''t support canvas</canvas>
</div>

Answer 8

Los mismos códigos de Nickolay anteriores, pero probados en IE9 y Chrome (y eliminado la representación adicional):

window.onload = window.onresize = function() {
   var canvas = document.getElementById(''canvas'');
   var viewportWidth = window.innerWidth;
   var viewportHeight = window.innerHeight;
   var canvasWidth = viewportWidth * 0.8;
   var canvasHeight = canvasWidth / 2;

   canvas.style.position = "absolute";
   canvas.setAttribute("width", canvasWidth);
   canvas.setAttribute("height", canvasHeight);
   canvas.style.top = (viewportHeight - canvasHeight) / 2 + "px";
   canvas.style.left = (viewportWidth - canvasWidth) / 2 + "px";
}

HTML:

<body>
  <canvas id="canvas" style="background: #ffffff">
     Canvas is not supported.
  </canvas>
</body>

La compensación superior e izquierda solo funciona cuando agrego px .

Answer 9

Probado solo en Firefox:

<script>
window.onload = window.onresize = function() {
    var C = 0.8;        // canvas width to viewport width ratio
    var W_TO_H = 2/1;   // canvas width to canvas height ratio
    var el = document.getElementById("a");

    // For IE compatibility http://www.google.com/search?q=get+viewport+size+js
    var viewportWidth = window.innerWidth;
    var viewportHeight = window.innerHeight;

    var canvasWidth = viewportWidth * C;
    var canvasHeight = canvasWidth / W_TO_H;
    el.style.position = "fixed";
    el.setAttribute("width", canvasWidth);
    el.setAttribute("height", canvasHeight);
    el.style.top = (viewportHeight - canvasHeight) / 2;
    el.style.left = (viewportWidth - canvasWidth) / 2;

    window.ctx = el.getContext("2d");
    ctx.clearRect(0,0,canvasWidth,canvasHeight);
    ctx.fillStyle = ''yellow'';
    ctx.moveTo(0, canvasHeight/2);
    ctx.lineTo(canvasWidth/2, 0);
    ctx.lineTo(canvasWidth, canvasHeight/2);
    ctx.lineTo(canvasWidth/2, canvasHeight);
    ctx.lineTo(0, canvasHeight/2);
    ctx.fill()
}
</script>

<body>
<canvas id="a" style="background: black">
</canvas>
</body>

Answer 10

Sencillo:

<body>
    <div>
        <div style="width: 800px; height:500px; margin: 50px auto;">
            <canvas width="800" height="500" style="background:#CCC">
             Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </div>
</body>

Answer 11

para centrar el lienzo dentro de la ventana + "px" se debe agregar a el.style.top y el.style.left .

el.style.top = (viewportHeight - canvasHeight) / 2 +"px";
el.style.left = (viewportWidth - canvasWidth) / 2 +"px";