jquery - ejemplos - HTML5 Canvas 100% de ancho de altura de la ventana gráfica?
dibujar en canvas html5 (6)
Intento crear un elemento canvas que ocupe el 100% del ancho y alto de la ventana gráfica.
Puedes ver en mi ejemplo here que está ocurriendo, sin embargo está agregando barras de desplazamiento tanto en Chrome como en Firefox. ¿Cómo puedo evitar las barras de desplazamiento adicionales y simplemente proporcionar exactamente el ancho y alto de la ventana para que sea del tamaño del lienzo?
(Expandiendo la respuesta de 動靜 能量)
Estilo el lienzo para llenar el cuerpo. Cuando renderice en el lienzo, tenga en cuenta su tamaño.
http://jsfiddle.net/mqFdk/356/
<!DOCTYPE html>
<html>
<head>
<title>aj</title>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0
}
#c {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden
}
Javascript:
function redraw() {
var cc = c.getContext("2d");
c.width = c.clientWidth;
c.height = c.clientHeight;
cc.scale(c.width, c.height);
// Draw a circle filling the canvas.
cc.beginPath();
cc.arc(0.5, 0.5, .5, 0, 2*Math.PI);
cc.fill();
}
// update on any window size change.
window.addEventListener("resize", redraw);
// first draw
redraw();
Estaba buscando encontrar la respuesta a esta pregunta también, pero la respuesta aceptada se estaba rompiendo para mí. Al parecer, usar window.innerWidth no es portátil. Funciona en algunos navegadores, pero noté que a Firefox no le gustó.
Gregg Tavares publicó un gran recurso aquí que aborda este problema directamente: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Ver anti-pattern # ''s 3 y 4).
Usar canvas.clientWidth en lugar de window.innerWidth parece funcionar muy bien.
Aquí está el bucle de renderizado sugerido por Gregg:
function resize() {
var width = gl.canvas.clientWidth;
var height = gl.canvas.clientHeight;
if (gl.canvas.width != width ||
gl.canvas.height != height) {
gl.canvas.width = width;
gl.canvas.height = height;
return true;
}
return false;
}
var needToRender = true; // draw at least once
function checkRender() {
if (resize() || needToRender) {
needToRender = false;
drawStuff();
}
requestAnimationFrame(checkRender);
}
checkRender();
Para que el lienzo ocupe siempre el ancho y el alto de la pantalla, lo que significa que incluso cuando se cambia el tamaño del navegador, debe ejecutar el bucle de dibujo dentro de una función que redimensiona el lienzo a window.innerHeight y window.innerWidth.
Ejemplo: http://jsfiddle.net/jaredwilli/qFuDr/
HTML
<canvas id="canvas"></canvas>
JavaScript
(function() {
var canvas = document.getElementById(''canvas''),
context = canvas.getContext(''2d'');
// resize the canvas to fill browser window dynamically
window.addEventListener(''resize'', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvas goes will be cleared.
*/
drawStuff();
}
resizeCanvas();
function drawStuff() {
// do your drawing stuff here
}
})();
CSS
* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; } /* To remove the scrollbars */
Así es como haces correctamente el lienzo a todo lo ancho y alto del navegador. Solo tiene que poner todo el código para dibujar en el lienzo en la función drawStuff ().
Puede probar unidades de ventana (CSS3):
canvas {
height: 100vh;
width: 100vw;
display: block;
}
Responderé a la pregunta más general sobre cómo hacer que un lienzo se adapte dinámicamente en tamaño al cambiar el tamaño de la ventana. La respuesta aceptada maneja adecuadamente el caso donde se supone que el ancho y la altura son del 100%, que es lo que se solicitó, pero que también cambiará la relación de aspecto del lienzo. Muchos usuarios querrán que el lienzo cambie el tamaño del tamaño de la ventana, pero manteniendo intacta la relación de aspecto. No es la pregunta exacta, pero "encaja", simplemente colocando la pregunta en un contexto un poco más general.
La ventana tendrá una relación de aspecto (ancho / alto), y también lo hará el objeto canvas. Cómo desea que estas dos proporciones de aspecto se relacionen entre sí es algo que tendrá que tener en claro, no existe una respuesta de "talla única" para esa pregunta. Iré a través de algunos casos comunes de lo que podría querer.
Lo más importante que debe tener en claro: el objeto de lienzo html tiene un atributo de ancho y un atributo de alto; y luego, el CSS del mismo objeto también tiene un ancho y un atributo de altura. Esos dos anchos y alturas son diferentes, ambos son útiles para diferentes cosas.
Cambiar los atributos de ancho y alto es un método con el que siempre puede cambiar el tamaño de su lienzo, pero luego tendrá que volver a pintar todo, lo que llevará tiempo y no siempre es necesario, ya que puede cambiar el tamaño de la pieza. a través de los atributos css, en cuyo caso no volverá a dibujar el lienzo.
Veo 4 casos de lo que podría querer que ocurra en el cambio de tamaño de la ventana (todo comienza con un lienzo de pantalla completa)
1: desea que el ancho permanezca al 100% y desea que la relación de aspecto permanezca como estaba. En ese caso, no necesita volver a dibujar el lienzo; ni siquiera necesita un controlador de cambio de tamaño de ventana. Todo lo que necesitas es
$(ctx.canvas).css("width", "100%");
donde ctx es su contexto de lienzo. violín: resizeByWidth
2: quiere que el ancho y el alto permanezcan al 100%, y desea que el cambio resultante en la relación de aspecto tenga el efecto de una imagen estirada. Ahora, todavía no necesita volver a dibujar el lienzo, pero necesita un controlador de cambio de tamaño de ventana. En el controlador, lo haces
$(ctx.canvas).css("height", window.innerHeight);
violín: messWithAspectratio
3: quiere que el ancho y la altura permanezcan al 100%, pero la respuesta al cambio en la relación de aspecto es algo diferente de estirar la imagen. Luego debe volver a dibujar, y hágalo de la forma que se describe en la respuesta aceptada.
violín: redraw
4: desea que el ancho y la altura sean del 100% en la carga de la página, pero permanezca constante a partir de entonces (sin reacción al cambio de tamaño de la ventana).
violín: fixed
Todos los violines tienen un código idéntico, a excepción de la línea 63 donde se establece el modo. También puede copiar el código del violín para ejecutar en su máquina local, en cuyo caso puede seleccionar el modo a través de un argumento querystring, como? Mode = redraw
<!DOCTYPE html>
<html>
<head>
<title>aj</title>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
con CSS
body {
margin: 0;
padding: 0
}
#c {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden
}