hacer lienzo tan ancho y tan alto como el padre


80

Me gustaría hacer un lienzo rectangular para simular una barra de progreso, pero parece que cuando configuro el ancho y el alto de un lienzo al 100%, realmente no lo hace tan alto y ancho como el padre

consulte el ejemplo a continuación
http://jsfiddle.net/PQS3A/

¿Es posible incluso hacer lienzos no cuadrados? No quiero codificar la altura y el ancho del lienzo, porque debería cambiar dinámicamente cuando se ve en una pantalla más grande o más pequeña, incluidos los dispositivos móviles.

Respuestas:


138

Aquí hay un ejemplo funcional que soluciona los problemas:

http://jsfiddle.net/PQS3A/7/

Tuviste varios problemas con tu ejemplo:

  1. A <div>no tiene heighto widthatributos. Debe configurarlos a través de CSS.
  2. Incluso si el div tuviera el tamaño correcto, estaba usando el valor predeterminado position:static, lo que significa que NO es el padre de posicionamiento de ningún hijo. Si desea que el lienzo tenga el mismo tamaño que el div, debe establecer el div en position:relative(o absoluteo fixed).
  3. Los atributos widthy heighten un lienzo especifican el número de píxeles de datos que se dibujarán (como los píxeles reales de una imagen) y están separados del tamaño de visualización del lienzo. Estos atributos deben establecerse en números enteros.

El ejemplo vinculado anteriormente usa CSS para establecer el tamaño de div y convertirlo en un padre posicionado. Crea una función JS (que se muestra a continuación) para configurar un lienzo para que tenga el mismo tamaño de visualización que su padre posicionado, y luego ajusta las propiedades internas widthy heightpara que tenga la misma cantidad de píxeles que muestra.

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

1
oh wow, no cambié la posición a relativa o absoluta porque creo que la etiqueta div por defecto se estirará para contener el elemento secundario que tiene, ¿así que no es el caso? ¿Dejará que el niño crezca más allá de sus límites si está en una posición estática? Pensé que la posición tiene que ver literalmente con la posición, y lo que quería archivar es hacerlo tan ancho y alto como el padre. así que supongo que la posición también dicta qué elemento secundario (dentro de la etiqueta div) hará referencia al ancho y alto.
user1118019

@ user1118019 No entendí completamente lo que acaba de escribir, pero aquí hay algunos detalles destacados. Los elementos que display:blockno tienen CSS widthespecificado se expanden para ser tan anchos como su contenedor. Los elementos de contenedor sin un CSS heightespecificado son tan altos como su contenido; Los contenidos que tienen un porcentaje de altura son equivalentes a tener height:0cuando se trata de que el padre determine qué tan alto debe ser. Siempre que utilice el posicionamiento absoluto o las dimensiones porcentuales, se calculan en relación con el "padre de compensación"; de forma predeterminada, el cuerpo es el único padre desplazado.
Phrogz

@ user1118019 Los elementos que son position:static(el valor predeterminado y el comportamiento de todos los elementos) no inician un nuevo sistema de posicionamiento, pero lo position:relativehacen (sin cambiar de otro modo la visualización del elemento). Por ejemplo, vea esta demostración . Observe cómo #a1está posicionado y dimensionado en relación con el cuerpo, ignorando su contenido <div>. Observe cómo, en #b1cambio, está posicionado y dimensionado en relación con su contenedor, siendo la única diferencia entre los dos #b { position:relative}.
Phrogz

gracias Phrogz ... lo tengo ahora, gracias por tomarse su tiempo y explicarme las cosas, realmente lo aprecio
user1118019

1
"Incluso si el div tuviera el tamaño correcto, estaba usando la posición predeterminada: estática, lo que significa que NO es el padre de posicionamiento de ningún hijo" smh ... ¿por qué, CSS? Solo he sido bueno contigo.
CCJ

15

Use los atributos widthy heightdel lienzo si desea que sea tan grande como el elemento principal. Puede configurarlos usando JQuery .

$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
});

Si no conoce JQuery , utilice el siguiente Javascript:

var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

Si usa los cssatributos de alto y ancho style="width:100%; height:100%;", entonces solo está estirando el lienzo. Esto hará que todo lo que dibuje en el lienzo se vea estirado.

JSFiddle para la solución JQuery.

JSFiddle para la solución Javascript.


2
Noto que el interrogador no se refirió a jquery y, por lo tanto, quizás no lo sepa. Es posible que necesiten un método Javascript puro.
jing3142

@ jing3142 Buena decisión. Me he actualizado con la solución JQuery y la solución que no es JQuery.
Brant Olsen

1
Tenga en cuenta que la solución que no es jQuery fallará a menos que coloque un style=""atributo explícito en el padre o use JS para establecer el estilo. Debería usar getComputedStyle()o, como hice en mi respuesta, offsetWidth/ offsetHeight.
Phrogz

Gracias Brant por responder, aceptaría tanto su respuesta como la primera si pudiera. pero de todos modos también apruebo tu respuesta. de nuevo muchas gracias por explicarme.
user1118019

-1

Utilice propiedades CSS en lugar de atributos en las etiquetas:

<div style="background-color:blue;width:140px;height:20px">
    <canvas style="background-color: red;width:100%;height:100%">
    </canvas>
</div>​

Eso parece funcionar


22
Esto estirará el lienzo en lugar de redimensionarlo, lo que hará que todos los dibujos en el lienzo se vean extraños.
Brant Olsen
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.