elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Únete al Grupo Steam elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como puedo girar una imagen en CANVAS JS
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como puedo girar una imagen en CANVAS JS  (Leído 4,632 veces)
SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Como puedo girar una imagen en CANVAS JS
« en: 8 Noviembre 2021, 07:29 am »

Hola que tal llevo ya rato intentando lograr que una imagen gire sobre si misma como lo hacen las ruletas de la suerte, pero lo unico que logro es que se rote todo el canvas con este código
Código
  1.            inicio++;
  2.            ctx.drawImage(rueda,0,0);
  3.            ctx.rotate(inicio*Math.PI/180);
  4.  
  5.  


En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.156



Ver Perfil
Re: Como puedo girar una imagen en CANVAS JS
« Respuesta #1 en: 8 Noviembre 2021, 18:37 pm »

Tengo entendido que la etiqueta HTML Canvas es como una hoja de papel, y el Objeto Canvas  javascript (ctx) es como una estampadora, no serían lo mismo, la hoja se queda ahí estática, lo que puede girar es la estampadora y estampar cosas.

Por otro lado puede darte problemas los Ejes de Rotación, por defecto siempre están fijos en la esquina superior izquierda, si quieres que el eje esté en centro de la figura tienes que Trasladar dicho eje con Translate(), adicionalmente debes considerar el Eje de la Imagen ya que al estamparla se considera su eje o punto de inserción la esquina de arriba a izquierda igualmente, por esto tendrías que insertarla centrándola en el Eje del CTX poniendo coordenadas negativas iguales al ancho y alto de la imagen respectivamente:

Código
  1. <body></body>
  2.  
  3. <script>
  4.  
  5.  var cnv = document.createElement('canvas')
  6.  cnv.style.border = '1px solid red'
  7.  document.body.appendChild(cnv)
  8.  cnv.width = 480
  9.  cnv.height = 320
  10.  
  11.  var ctx = cnv.getContext('2d');
  12.  var img = new Image()
  13.  img.src = 'ruleta.png'
  14.  img.onload = function(){
  15.    ctx.translate(cnv.width/2, cnv.height/2)
  16.    setInterval(function(){
  17.      ctx.rotate(Math.PI/180 * 5)
  18.      ctx.drawImage(img, -img.width/2, -img.height/2)
  19.    }, 50)
  20.  }
  21. </script>

Ejemplo en vivo: https://jsbin.com/facofowetu/edit?html,output


En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Como puedo girar una imagen en CANVAS JS
« Respuesta #2 en: 10 Noviembre 2021, 15:47 pm »

El rotate de canvas aplica un cambio que persiste. Así que cualquier otra operación sobre el canvas también es rotada.

Si quieres tener elementos que no rotan y otros que si rotan, necesitas reiniciar la matriz de transformación:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform

Toma nota del polyfill que debería funcionar con todos los navegadores modernos.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Girar Imagen en Java
Java
Lopardo 4 16,792 Último mensaje 24 Octubre 2008, 03:28 am
por 1mpuls0
girar imagen de video
Multimedia
pardo 2 2,179 Último mensaje 5 Febrero 2008, 16:52 pm
por pardo
No puedo girar la pantalla en un Acer Aspire One D255
Windows
okik 1 3,360 Último mensaje 14 Julio 2016, 15:45 pm
por bettu
¿Como puedo mejorar esta colisión? JS "canvas"
Desarrollo Web
SrTrp 3 4,581 Último mensaje 19 Agosto 2017, 06:12 am
por Serapis
Ayuda como puedo centrar esta imagen de atras? osea centrar una imagen detras
Desarrollo Web
ReAdriel 1 2,179 Último mensaje 8 Octubre 2018, 20:30 pm
por EdePC
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines