Cambio de tamaño de lienzo HTML5 al elemento principal

Quiero cambiar el tamaño del elemento lienzo de modo que si se ajusta a su elemento primario, ya sea <body> ("pantalla completa") o algo así como <div>. Este es mi intento:Cambio de tamaño de lienzo HTML5 al elemento principal

// called at each frame 
function update() { 
    var canvasNode = document.getElementById('mycanvas'); 
    canvasNode.width = canvasNode.parentNode.clientWidth; 
    canvasNode.height = canvasNode.parentNode.clientHeight; 
}

Por alguna razón, el lienzo no para de crecer! Tal vez client* no son los parámetros correctos?

ver el código en acción aquí: http://jsfiddle.net/ARKVD/24/

Fuente

2011-12-24 Giovanni Funchal

Si la tela es '155px' alta, el cuerpo es' 160px' alta, lo que hace que el lienzo seguir creciendo '5px' cada vez (el cuerpo parece ser' 5px' por delante cada vez que crece el lienzo). Sin embargo, no tengo idea de por qué, ya que configuraste todos los márgenes/paddings en '0px'. (Esto está en Chrome.) – pimvdb

Gracias, en Linux/Firefox, estoy viendo una compensación de 4px o 3px (dependiendo de si mi ventana está maximizada o no) ... ¡molesto! –

Lo extraño es que, si el lienzo está configurado a una altura de '0px', el cuerpo es' 20px' alto. El cuerpo solo colapsa a '0px' si el lienzo se elimina realmente. – pimvdb

La cosa más fácil que hacer es mantener siempre la lona en su propia div.

La única cosa que siempre va a estar en este div es el lienzo.

continuación, puede utilizar CSS para cambiar el tamaño del div que le apetezca. ¿Lo quieres tan grande como el cuerpo? Dale el div width: 100%.

entonces siempre se puede hacer con razón:

canvas.width = theDiv.clientWidth; 
canvas.height = theDiv.clientHeight;

Si usted hace esto usted no tendrá que preocuparse por las cuestiones extrañas que actualmente está enfrentando cuando el cuerpo es la matriz directa de la div.

Fuente

2011-12-24 19:01:30

¿Puede explicar por qué no funciona con el cuerpo (es decir, por qué necesita DIV)? –

Si desea que sea tan grande como el cuerpo que tiene un div lo hace más fácil porque puede especificar un ancho y alto con CSS (como 100% de ancho, etc.). El ancho del 100% no necesariamente lo hace tan grande como el 'clientWidth' del cuerpo. En cambio, lo hace tan grande como el "bloque contenedor" como se llama en la especificación CSS, que es diferente (más pequeño) que el ancho del cliente y la altura del cuerpo. Comience con esto: http://jsfiddle.net/9FyNZ/ –

¡Gracias! Esto resolvió un problema muy molesto que estaba teniendo. – Brad

me encontré con el mismo problema que sucede, y la única manera que pude encontrar para trabajar alrededor de ella fue para establecer la altura lienzo para parentHeight - 1. Esto estaba utilizando CEF. En this violín tuve que configurarlo para que parentHeight - 5.

canvasNode.height = div.clientHeight - 5;

Fuente

2014-09-29 10:04:45 Sam

Puede solucionar el problema al romper la dependencia circular entre el nodo principal y el nodo secundario. La asignación de tamaño de los elementos DOM solo debería propagarse de arriba hacia abajo (del padre al hijo). Puede asegurarse de que el elemento secundario (lienzo) no afecta al tamaño de los padres mediante el establecimiento de

canvasNode.style.position = 'absolute';

Esto lo pone en su propio flujo de documentos que es independiente de la matriz.

Fuente

2017-07-25 21:19:05 Imran

He encontrado que el enfoque más limpio es simplemente "recordar" el elemento canvas lo grande que se supone que es al cambio de tamaño:

window.onresize = function() { 
    canvas.style.width = '100%'; 
    canvas.height = canvas.width * .75; 
}

El ajuste en este caso, la altura está ahí para simplemente mantener un 4 : 3 relación. Por supuesto, puede hacerlo también al 100% si lo desea.

Fuente

2017-11-09 23:24:07

Cambio de tamaño de lienzo HTML5 al elemento principal

Respuesta

Cuestiones relacionadas