html - style - unidades de medida en css
Cómo poner ancho de porcentaje en lienzo html(no css) (5)
Tengo una imagen y he superpuesto un lienzo sobre ella para poder dibujar "en" la imagen sin modificarla.
<div class="needPic" id="container">
<img id="image" src=""/>
<!-- Must specify canvas size in html -->
<canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas>
</div>
Puedo especificar el ancho y la altura en píxeles en la línea del lienzo anterior y funciona bien, sin embargo, necesito esto para un tamaño dinámico según el tamaño de la pantalla (tiene que funcionar en teléfonos inteligentes pequeños y tabletas). Cuando trato de poner el porcentaje como se muestra arriba, lo interpreta como píxeles. Por lo tanto, el lienzo tendrá 70px de ancho y 60 px de alto.
Por alguna razón no puedo dimensionar el lienzo en el CSS, así que parece que tengo que hacerlo en el html. Para aclarar, cuando trato de especificar las dimensiones del lienzo en el CSS, en realidad no cambian el tamaño del lienzo. Parece como si la imagen estuviera interfiriendo de alguna manera.
Cualquier ayuda sería apreciada.
Actualización: Si hago <canvas id="sketchpad" style="width:70%;height:60%;"></canvas> entonces el valor predeterminado es 150px y ancho de 300px (independientemente del dispositivo) y luego Estira el lienzo para que encaje el div. Establecí el div en 60% de ancho y 60% de altura en el css, por lo que el lienzo se estira para rellenar eso. Confirmé esto registrando el canvas.width vs canvas.style.width - canvas.width era 300px y canvas.sytle.width era ''60% ''(del div principal). Esto provoca algunos efectos de pixelación y dibujo realmente extraños ...
Cambia el tamaño de tu lienzo para que se ajuste al tamaño de la ventana / navegador:
<script>
function resizeCanvas() {
var canvs = document.getElementById("snow");
canvs.width = window.innerWidth;
canvs.height = window.innerHeight;
}
</script>
<body onload="resizeCanvas();">
<canvas id="snow" ></canvas>
</body>
Debe establecer el tamaño del lienzo en píxeles o no solo reducirá la calidad de su contenido, sino que si desea dibujar en él, las coordenadas del mouse también estarán desactivadas. No uses CSS para escalar el lienzo si lo vas a usar interactivamente.
Le recomendaría que ajuste su imagen y luego adopte el lienzo al tamaño que sea. Puedes hacer esto usando getComputedStyle(element) que te da cualquier tamaño que el elemento esté configurado en píxeles.
Después de la carga de la imagen (ya que necesita asegurarse de que la imagen esté realmente cargada para obtener su tamaño) o más adelante, si cambia el tamaño de la imagen (CSS) sobre la marcha, puede hacer esto:
/// get computed style for image
var img = document.getElementById(''myImageId'');
var cs = getComputedStyle(img);
/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue(''width''), 10);
var height = parseInt(cs.getPropertyValue(''height''), 10);
/// now use this as width and height for your canvas element:
var canvas = document.getElementById(''myCanvasId'');
canvas.width = width;
canvas.height = height;
Ahora el lienzo se ajustará a la imagen, pero con una proporción de píxeles del lienzo 1: 1 para ayudarlo a evitar problemas cuando dibuje en el lienzo. De lo contrario, también tendrá que convertir / escalar las coordenadas del mouse / táctil.
En lugar de usar width = "", use style = "" como tal
<canvas id="sketchpad" style="width:70%; height:60%" >Sorry, your browser is not supported.</canvas>
EDITAR:
<div class="needPic" id="container" style="width:70%; height:60%; min-width:__px; min-height:__px">
<img id="image" src="" style="width:70%; height:60%; min-width:__px; min-height:__px"/>
<!-- Must specify canvas size in html -->
<canvas id="sketchpad" style="width:70%; height:60%; min-width:__px; min-height:__px>Sorry, your browser is not supported.</canvas>
</div>
Establezca la altura del lienzo a la altura interior de la ventana y el ancho al ancho interior de la ventana:
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
Si quieres un porcentaje específico, multiplícalos por el porcentaje. Ejemplo:
//25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages
Puede cambiar el tamaño del lienzo para que se ajuste al ancho de la imagen en píxeles a través de JavaScript. Ya que estás usando un lienzo, probablemente ya estés usando JavaScript, así que esto no debería ser un problema.
Consulte Cambiar el tamaño del lienzo HTML5 para que se ajuste a la ventana , aunque no es idéntica, una solución similar debería funcionar.