Como puedo girar una imagen en CANVAS JS

SrTrp · 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 (javascript) [Seleccionar]


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

EdePC · 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 (javascript) [Seleccionar]

<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

MinusFour · 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.

Test Foro de elhacker.net SMF 2.1

Como puedo girar una imagen en CANVAS JS

SrTrp

EdePC

MinusFour