Quiero saber cómo puedo traducir una escena completa ya dibujada en un lienzo html5, por ejemplo, 5 píxeles hacia abajo. Sé que el método de traducción simplemente traduce el sistema de coordenadas del lienzo, pero quiero saber si hay una forma de traducir toda la escena que ya está dibujada en el lienzo.Traducir un lienzo html5
se puede aplicar la transforma y llamar drawImage que pasa en el propio lienzo.
ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
Al hacerlo, los contenidos originales seguirán debajo. Dependiendo del efecto que intente lograr, la configuración de globalCompositeOperation puede ayudarlo con eso.
Pero es probable que necesite usar drawImage para copiar primero a un segundo lienzo, borrar la corriente, aplicar la transformación y extraer de la copia.
No, a menos que haga una captura de pantalla y traduzca eso.
Sin embargo, sólo la inserción de
context.translate(0, 5)// or your values
justo antes de su código de dibujo debe hacer el truco.
Referencia: MDN Canvas Tutorial (Transformations)
Ya cubrí eso, y (al menos pensé que) dejé en claro que no era lo que quería. Esa traducción traducirá todo lo que dibuje después, no cualquier cosa que ya esté dibujada. Sin embargo, su solución de captura de pantalla puede ser lo que yo quería. ¿Tienes instrucciones sobre cómo hacer eso? – George
El objeto Canvas tiene un método llamado toDataUrl. Consulte esta pregunta http://stackoverflow.com/questions/934012/get-image-data-in-javascript –
Esto suena como lo que quería. Lo probaré y te dejaré saber si funcionó para mí. – George
Esta solución funcionó muy bien para mí. Sin embargo, no funciona tan bien cuando también hay escalado. Tengo un lienzo donde la escala es tal que el área de dibujo tiene un ancho y alto de, por ejemplo, 120000 y 60000. El elemento canvas tiene ancho 1200 y alto 600, por lo que la transformación de escala se realiza en el sistema de coordenadas antes de dibujar. De todos modos, el problema es que traducir Y escalar borrará la imagen si la copio en un segundo lienzo, borro la corriente y aplico la transformación y copio como usted dijo. Solo quería saber si sabías cómo hacerlo no borroso. – George
Sí, eso es exactamente lo que está pasando. El problema es que si dibujo del lienzo principal que tiene alta resolución para el lienzo de copia de seguridad, siempre se dibujará usando la resolución base de 1200x600, en lugar de la resolución ampliada de 1200000x600000. Además, la solución de ida y vuelta está bien para mis propósitos, ya que solo necesita hacer eso cuando el usuario lo desee, y no lo hará continuamente. – George