Estoy experimentando con la animación en <canvas>
y no sé cómo dibujar una imagen en un ángulo. El efecto deseado es unas pocas imágenes dibujadas como de costumbre, con una imagen girando lentamente. (Esta imagen no está en el centro de la pantalla, si eso hace alguna diferencia).HTML canvas drawImage con un ángulo
Respuesta
Debe modificar la matriz de transformación antes de dibujar la imagen que desea rotar.
Supongamos que la imagen apunta a un objeto HTMLImageElement.
var x = canvas.width/2;
var y = canvas.height/2;
var width = image.width;
var height = image.height;
context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width/2, -height/2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);
Las coordenadas x, y es el centro de la imagen en el lienzo.
He escrito una función (en base a la respuesta de Jakub) que permite al usuario pintar una imagen en una posición X, Y sobre la base de una rotación personalizada en un punto de rotación personalizada:
function rotateAndPaintImage (context, image, angleInRad , positionX, positionY, axisX, axisY) {
context.translate(positionX, positionY);
context.rotate(angleInRad);
context.drawImage(image, -axisX, -axisY);
context.rotate(-angleInRad);
context.translate(-positionX, -positionY);
}
A continuación, puede llamar de esta manera:
var TO_RADIANS = Math.PI/180;
ctx = document.getElementById("canvasDiv").getContext("2d");
var imgSprite = new Image();
imgSprite.src = "img/sprite.png";
// rotate 45º image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100
rotateAndPaintImage (ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30);
es interesante que la primera solución funcionó para tanta gente, que no dio el resultado que necesitaba. Al final he tenido que hacer esto:
ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();
donde (positionX, positionY)
es las coordenadas en el lienzo que quiero que la imagen que se encuentra en y (x, y)
es el punto de la imagen en la que desea que la imagen gire.
- 1. HTML Canvas Tracing
- 2. getPixel from HTML Canvas?
- 3. HTML Canvas Unit testing
- 4. HTML5 drawimage de video a lienzo
- 5. Soporte de ángulo recto en HTML
- 6. HTML Canvas Interval vs RequestAnimationFrame
- 7. Lienzo drawImage scale
- 8. posible utilizar imágenes html como canvas con getImageData/putImageData?
- 9. Firefox lanzando una excepción con HTML Canvas putImageData
- 10. Problemas de rendimiento con HTML to canvas, ¿dónde comenzar?
- 11. ¿Cómo puedo realizar el relleno de inundación con HTML Canvas?
- 12. Dibujar texto en ángulo
- 13. Arco de lienzo() vs drawImage()
- 14. Giro 3D con eje & ángulo
- 15. gdi + Gráficos :: DrawImage realmente lento ~~
- 16. OpenCV RotatedRect con ángulo especificado
- 17. ¿Lienzo gira desde el ángulo inferior de la imagen central?
- 18. html5 drawImage funciona en firefox, no en cromo
- 19. GDI + DrawImage() con mapa de bits transparente en una impresora
- 20. GIF animado en canvas de HTML5
- 21. Dibujar texto sobre lienzo en el ángulo
- 22. Encuentra el punto con radio y ángulo
- 23. Cuaterniones con respecto al ángulo Eje +
- 24. Guardar una animación creada con HTML5 Canvas
- 25. lienzo drawImage usando el URL de datos
- 26. lienzo drawImage no dibuja imágenes la primera vez
- 27. Cómo dibujar PNG en un elemento canvas - sin transparencia
- 28. Gire un UIImage o UIView en un ángulo particular, NO una cantidad de ángulo
- 29. ¿Por qué HTML Canvas redondea lineCap para el último segmento?
- 30. animación en espera con canvas de HTML5
en lugar de rotar/traducir al final, puede hacer un 'context.save()' y 'context.restore()' antes y después de hacer las transformaciones y el dibujo. –
Si bien guardar()/restaurar() puede parecer más limpio, sería mucho más ineficiente. El motor tendrá que almacenar/restaurar todas las propiedades de contexto, no solo las que estamos manipulando aquí. Eso es importante en una ruta de código sensible. –
Para otro ejemplo, vea esta pregunta y respuesta (duplicadas): [Dial of a Gauge using HTML5 Canvas - Rotate About Arbitrary Point] (http://stackoverflow.com/questions/4649836/dial-of-a-gauge-using -html5-canvas-rotate-about-arbitrary-point/4650102 # 4650102). – Phrogz