Imprimir Página - Como puedo girar una imagen en CANVAS JS

Título: Como puedo girar una imagen en CANVAS JS
Publicado por: SrTrp 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

            inicio++;
            ctx.drawImage(rueda,0,0);
            ctx.rotate(inicio*Math.PI/180);

Título: Re: Como puedo girar una imagen en CANVAS JS
Publicado por: EdePC 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

<body></body>
 
<script>
 
  var cnv = document.createElement('canvas')
  cnv.style.border = '1px solid red'
  document.body.appendChild(cnv)
  cnv.width = 480
  cnv.height = 320
 
  var ctx = cnv.getContext('2d');
  var img = new Image()
  img.src = 'ruleta.png'
  img.onload = function(){
    ctx.translate(cnv.width/2, cnv.height/2)
    setInterval(function(){
      ctx.rotate(Math.PI/180 * 5)
      ctx.drawImage(img, -img.width/2, -img.height/2)
    }, 50)
  }
</script>

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

Título: Re: Como puedo girar una imagen en CANVAS JS
Publicado por: MinusFour 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.

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: SrTrp en 8 Noviembre 2021, 07:29 am