Rotar solo el drawImage javascript

[SrTrp]

Buenas estoy haciendo un "juego" donde tengo sprite pero necesito rotar la imagen, cuando intento usar el rotate o tranlate, todo el canvas se rota, se me ocurrio crear imagenes "sprites" para cada direccion pero me seria algo mas tedioso y tendria que cargar mas archivos e indagando encontre esas soluciones pero me rota todo el canvas y solo quiero mi opjeto este esmi codigo

Código (javascript) [Seleccionar] Expandir


ctx.drawImage(obj1,serpiente[i].x, serpiente[i].y);


[engel lex]

creo que buscas es el transform

https://www.w3schools.com/tags/canvas_transform.asp

[EdePC]

Es completamente normal que todo el canvas se rote ya que estas rotando el ctx que es el canvas. Lo normal que tener un Sprite Sheet como el siguiente:



- Luego agregar la imagen al canvas usando las coordenadas adecuadas, por ejemplo si quiero el sprite(2, 3) se agregaría así:

Código (javascript) [Seleccionar] Expandir

ctx.drawImage(img, 64*1, 64*2, 64, 64, 0, 0, 64, 64)

- El primer argumento es la imagen <img src="https://i.stack.imgur.com/gZ3c5.png">
- El segundo es la coordenada "x" en pixeles del sprite a extraer, se suele multiplicar por el tamaño del sprite para hallar la columna adecuada
- El tercero es la coordenada "y" en pixeles del sprite a extraer, se suele multiplicar por el tamaño del sprite para hallar la fila adecuada
- El cuarto y quinto son el tamaño en pixeles ancho y alto respectivamente del sprite a extraer desde el Sprite Sheet
- El sexto y séptimo son las coordenas destino
- El octavo y el noveno son los tamaños que tendrá el sprite dibujado en el canvas.

Pero si quieres trabajar con un solo sprite y transformarlo, tienes la opción de guardar el estado de tu canvas (ctx.save()), luego voltear el canvas ya sea vertical u horizontalmente, dibujar tu sprite en las coordenadas adecuadas considerando que el canvas está volteado para al final restaurar tu canvas con canvas.restore()

- El siguiente ejemplo muestra como dibujar una imagen (sprite) de 300x150 volteado horizontalmente en un canvas de 800x600

Código (javascript) [Seleccionar] Expandir

ctx.save()
ctx.translate(800,0)
ctx.scale(-1,1)
ctx.drawImage(img,800-300,0)
ctx.restore()

[SrTrp]

Muchas gracias a ambos, y si me estuve complicando la vida así que ya obte por un sprite sheet, gracias!