Insertar imagen en canvas
Publicado por silmf91 (1 intervención) el 02/06/2014 18:48:41
Hola a todos!!!
Me he puesto a hacer una app en HTML5 y me ha surgido un problema...
En mi app tengo un header y luego he colocado un canvas donde quiero cargar una imagen. Mi intención es que esa imagen se reajuste al tamaño del canvas, y éste al tamaño del dispositivo donde se esté ejecutando la app para que quede proporcional. Para ello he intentado varias cosas:
- Lo primero, en el .css, al declarar el canvas he puesto esto:
- He declarado el canvas así: <canvas id="colours" width="device-width"></canvas>. No le he puesto "height" porque supuestamente así ya coge automáticamente el alto del teléfono, pero para comprobar qué medidas tiene el canvas usé un "alert" y me sale que tiene una altura de 150. Eso es imposible.... El único remedio que me ha quedado de momento es machacar yo la altura a "500", por ejemplo, pero en algunos dispositivos puede que de problemas porque no tengan tanta altura...
- Y, por último, al cargar la imagen en el canvas he puesto esto:
Si lo pongo así, se carga según el tamaño de la imagen sin ajustarse al canvas. Si en vez de poner ese drawImage pongo este otro se ajusta al canvas: ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
Así que mi duda es... como coger bien las medidas del dispositivo para asignarselas al canvas? Y estoy añadiendo bien la imagen al canvas para que se ajuste a su tamaño?
Además tengo otro problema. Si giro la pantalla del dispositivo de vertical a horizontal, la imagen se ajusta a ese tamaño, pero si pinto encima de la imagen, las coordenadas del cursor salen distorsionadas. Hay alguna forma de controlar eso???
Mil gracias!!! :) :)
Me he puesto a hacer una app en HTML5 y me ha surgido un problema...
En mi app tengo un header y luego he colocado un canvas donde quiero cargar una imagen. Mi intención es que esa imagen se reajuste al tamaño del canvas, y éste al tamaño del dispositivo donde se esté ejecutando la app para que quede proporcional. Para ello he intentado varias cosas:
- Lo primero, en el .css, al declarar el canvas he puesto esto:
1
2
3
4
5
6
7
8
9
10
canvas{ position: absolute; top: 44px; left: 0px; right: 0px; bottom: 0px; cursor: crosshair;width: 100%;
height: 100%;
}- He declarado el canvas así: <canvas id="colours" width="device-width"></canvas>. No le he puesto "height" porque supuestamente así ya coge automáticamente el alto del teléfono, pero para comprobar qué medidas tiene el canvas usé un "alert" y me sale que tiene una altura de 150. Eso es imposible.... El único remedio que me ha quedado de momento es machacar yo la altura a "500", por ejemplo, pero en algunos dispositivos puede que de problemas porque no tengan tanta altura...
- Y, por último, al cargar la imagen en el canvas he puesto esto:
1
2
3
4
5
6
7
var img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0);
}img.src = "./media/colores.png";
Si lo pongo así, se carga según el tamaño de la imagen sin ajustarse al canvas. Si en vez de poner ese drawImage pongo este otro se ajusta al canvas: ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
Así que mi duda es... como coger bien las medidas del dispositivo para asignarselas al canvas? Y estoy añadiendo bien la imagen al canvas para que se ajuste a su tamaño?
Además tengo otro problema. Si giro la pantalla del dispositivo de vertical a horizontal, la imagen se ajusta a ese tamaño, pero si pinto encima de la imagen, las coordenadas del cursor salen distorsionadas. Hay alguna forma de controlar eso???
Mil gracias!!! :) :)
Valora esta pregunta
0