Cambiar el tamaño de elemento canvas de HTML5 para que se ajuste a la ventana
https://stackoverflow.com/questions/1664785
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Cómo puedo ajustar automáticamente el HTML5 <canvas> elemento de ajuste a la página?
Por ejemplo, puedo conseguir una <div> a escala de ajuste de la height y width propiedades para el 100%, pero <canvas> no escala, no??
Solución
Creo que he encontrado una solución elegante a este:
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;
}
No ha tenido ninguna gran impacto en el rendimiento negativo para mí, hasta ahora.
Otros consejos
La siguiente solución funcionó para mí el mejor. Ya que soy relativamente nuevo en la codificación, me gustaría tener la confirmación visual de que algo está funcionando como espero que lo haga. 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 que muestra el borde de la lona de cambio de tamaño, y está siempre a lo largo del borde de la ventana, visible en los 4 lados, lo que no fue el caso para algunas de las otras respuestas anteriores. Espero que ayuda.
Básicamente lo que tienes que hacer es unir el evento onresize a su cuerpo, una vez que se captura el evento sólo tiene que cambiar el tamaño del lienzo utilizando 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>
Configuración de coordinar el lienzo anchura del espacio y la altura en base a las dimensiones del cliente navegador que requiere para cambiar el tamaño y volver a dibujar cada vez que se cambia el tamaño del navegador.
Una solución menos complicada es la de mantener las dimensiones dibujable en las variables de Javascript, pero establece las dimensiones de la lona en base a la screen.width, dimensiones Screen.Height. Uso de CSS para encajar:
#containingDiv {
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
La ventana del navegador en general, no siempre va a ser más grande que la propia pantalla (excepto cuando se misreported la resolución de la pantalla, ya que podría ser con la que no encaja, monitores duales), por lo que el fondo no se mostrará y las proporciones de píxeles ganó' t varían. Los píxeles de lona será directamente proporcional a la resolución de la pantalla a menos que utilice CSS para escalar la lona.
Un puro CSS el enfoque de la adición a la solución de @jerseyboy arriba.
Funciona en Firefox (probado en v29), Cromo (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 para el ejemplo: http://temporaer.net/open/so/140502_canvas-fit-to-window.html
Pero tenga cuidado, ya que @jerseyboy dice en su comentario:
Reescalado de lona con CSS es problemático.Al menos en Chrome y Safari, el ratón/eventos de toque de posiciones, no se corresponda 1:1 con pixel lienzo posiciones, y usted tendrá que transformar las coordenadas sistemas.
A menos que desee el lienzo para mejorar la resolución de sus datos de imagen de forma automática (que es lo conversaciones respuesta de James Black aproximadamente, pero no va a mirar bastante), usted tiene que cambiar su tamaño a sí mismo y volver a dibujar la imagen. Centrar un lona
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);
Si su div llena por completo la página web, entonces puede llenar ese div y por lo tanto tiene un lienzo que se llena el div.
Usted puede encontrar esta interesante, ya que puede necesitar utilizar un css a utilizar porcentaje, pero, depende del navegador que está utilizando, y lo mucho que está de acuerdo con la especificación: http: //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
Las dimensiones intrínsecas de la lona elemento igual al tamaño de la espacio de coordenadas, con los números interpretado en píxeles CSS. Sin embargo, el elemento puede ser dimensionado arbitrariamente por una hoja de estilo. Durante la representación, la imagen se escala para ajustarse a esta disposición tamaño.
Es posible que necesite para obtener el offsetWidth y la altura del div, o llegar a la ventana de altura / anchura y establecer que a medida que el valor del píxel.
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();
});
Si está interesado en la preservación de las relaciones de aspecto y hacerlo en CSS puro (teniendo en cuenta la relación de aspecto) se puede hacer algo, como a continuación. La clave es la padding-bottom en el elemento ::content que el tamaño del elemento container. Esto es de tamaño comparada con la anchura de su matriz, que se 100% por defecto. La relación especificada aquí tiene que coincidir con la relación de los tamaños en el elemento canvas.
// 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>
(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();
});
}());
El uso de jQuery se puede seguir el cambio de tamaño de la ventana y cambiar el ancho de la tela usando jQuery también.
Algo por el estilo
$( 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;">
Creo que esto es lo que debemos hacer exactamente: 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);
En primer lugar, no se puede utilizar el ancho y la altura de los atributos para cambiar el tamaño (con mi camino, al menos) porque eso va a romperlo. Puedes hacerlo: HTML:
<canvas id = 'myCanvas'></canvas>
JS:
var canvas = document.getElementById('myCanvas');
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
canvas.style.position = 'absolute';
//Or set the position to absolute using CSS
(Por favor perdóname por errores tipográficos, que tienden a hacer que una gran cantidad)
Estoy usando sketch.js así después de ejecutar el comando de inicio de la tela cambio el ancho y la altura con jQuery. Se basa en las dimensiones del elemento padre.
$ ( '# DrawCanvas'). Boceto (). Attr ( 'altura', $ ( '# DrawCanvas'). Parent (). Altura ()). Attr ( 'ancho', $ ( '# DrawCanvas' .) .parent () anchura ());
