2

Estpy tratando de que la imagen en el canvas me quede diagonal

Esto es lo que tengo

 var imageObjCextrema = new Image()
  imageObjCextrema.onload = function() {
   ctx.drawImage(imageObjCextrema, 35, 250, 7, 50);
 }
  imageObjCextrema.src = 'img/cotaPT.png';

introducir la descripción de la imagen aquí

2 respuestas 2

2

Las rotaciones no suelen ser sencillas porque dependen del centro de rotación elegido. Todo canvas tiene un 0,0 y por default este esta arriba a la izquierda. Este punto es el centro de toda rotación.

Si se desea pegar una imagen y que a su vez este rotada conviene seguir los siguientes pasos:

  • translate: transladar el 0,0 a un punto que resulte facil manejar. El centro de donde estara puesta esta imagen es uno de ellos.
  • rotate: rotar en un angulo en radianes el sistema de ejes x,y
  • drawImage: pegar la imagen en el nuevo sistema de coordenadas.

var papel = document.getElementById("papel");
var lapiz = papel.getContext("2d");

// Tracemos un rectangulo
lapiz.beginPath();
lapiz.moveTo(50,50);
lapiz.lineTo(200,50);
lapiz.lineTo(200,100);
lapiz.lineTo(50,100);
lapiz.closePath();
lapiz.stroke();

//Tomemos este rectangulo como source y copiemoslo en 130,150
var verticeX = 250;
var verticeY = 50;
var ancho = 170
var altura = 70;

lapiz.drawImage(papel, 40, 40, 170, 70, verticeX, verticeY, ancho, altura);

//Copiemos otro pero rotado alrededor del centro
//con "translate" corremos el 0,0 al centro del punto donde vamos a ubicar la imagen rotada
lapiz.translate(verticeX + ancho/2, verticeY + altura/2); 
//Usando "rotate" giramos los ejes en sentido horario en un angulo en radianes
lapiz.rotate(Math.PI/20);
//Pegamos la imagen en -ancho/2 y -altura/2 (el 0,0 es el centro de la imagen)
lapiz.drawImage(papel, 40, 40, 170, 70, -ancho/2, -altura/2, ancho, altura);
//Cada rotate genera un giro extra
lapiz.rotate(Math.PI/20);
lapiz.drawImage(papel, 40, 40, 170, 70, -ancho/2, -altura/2, ancho, altura);
lapiz.rotate(Math.PI/20);
lapiz.drawImage(papel, 40, 40, 170, 70, -ancho/2, -altura/2, ancho, altura);
<canvas id="papel" width="600" height="200">
	</canvas>

1

Prueba con ctx.rotate(numeroDeRadianes) siendo 1 vuelta entera 2pi radianes

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.