html - div - Centrar un lienzo
title html css (11)
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>
¿Cómo puedo marcar una página con un canvas HTML5 tal que el canvas
Toma el 80% del ancho
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%)
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.
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
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/
.
Dado que el lienzo no es nada sin JavaScript, use JavaScript también para dimensionar y posicionar (ya sabe: onresize , position:absolute , etc.)
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.
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.
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>
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 .
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>
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>
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";