¿Cómo construir una imagen transformada en la lona de javascript para la programación html5 y css3
transformaciones son operaciones matemáticas en javascript que se pueden aplicar a cualquier dibujo o imagen en que HTML5 y CSS3 página para cambiar la apariencia. Hay tres grandes transformaciones:
Video: Como hacer un Slider sencillo
traducción: Mover una cantidad particular en X e Y
rotación: Girar alrededor de un punto particular
Video: Streaming de Video con HTML5
escala: Cambiar el tamaño del dibujo en X e Y
los elemento permite que todas estas operaciones en cualquier tipo de dibujo. Sin embargo, la forma en que el elemento hace esto se vuelve un poco más cerca de matemáticas de lo que pudo haber conseguido antes. Transformaciones en el elemento canvas pueden ser difíciles de entender hasta que entienda un poco sobre cómo funcionan realmente.
En matemáticas, no se sabe muy transformar objetos. En su lugar, se modifica el sistema coordinado, y dibujar su imagen en el sistema de coordenadas recién transformado. Es común en una aplicación de dibujo vectorial de tener varios sistemas de coordenadas ocultos que trabajan a la vez. Eso es importante porque es la forma en que las transformaciones lienzo de trabajo. En esencia, cuando se desea realizar transformaciones sobre un objeto, que va a hacer lo siguiente:
Anunciar el comienzo de un sistema de coordenadas temporal.
La imagen principal ya cuenta con su propio sistema de coordenadas que no va a cambiar. Antes de poder transformar cualquier cosa, es necesario construir un nuevo sistema de coordenadas para sostener esos cambios. los salvar() comando indica el comienzo de una nueva definición del sistema de coordenadas.
Mover el centro con traducir().
El origen (0, 0) se inicia en la esquina superior izquierda del lienzo de forma predeterminada. Normalmente se va a construir sus objetos transformados en la (nueva) el origen y mueve el origen para colocar el objeto. Si tu traducir (50, 50) y luego dibujar una imagen en (0, 0), la imagen se dibuja en el origen del sistema de coordenadas temporal, que está en (50, 50) en el lienzo principal.
Girar el sistema de coordenadas con girar().
los girar() comando gira el nuevo sistema de coordenadas en torno a su origen. El parámetro de rotación es un grado en radianes.
Escalar el sistema de coordenadas en X e Y.
También puede alterar el nuevo sistema de coordenadas mediante la aplicación de valores de escala X e Y. Esto le permite crear imágenes estiradas y aplastadas.
Crear elementos en el nuevo sistema de coordenadas.
Video: HTML5 & CSS3 - 4.Canvas (Parte 4)
Después de haber aplicado todas las transformaciones que desea, se pueden utilizar todas las técnicas de dibujo tela ordinaria. Sin embargo, estos dibujos se dibujarán en el sistema “virtual” de coordenadas que acaba de hacer, no en el sistema principal de coordenadas de la lona.
Cierre el sistema de coordenadas temporal.
Video: Programación Android 3: "Hola Mundo"
En general, usted querrá aplicar diferentes transformaciones a diferentes partes de su lienzo. Cuando haya terminado con una transformación en particular, utilice el restaurar() comando para cerrar el nuevo sistema de coordenadas. Todos los comandos de dibujo subsiguientes utilizarán el sistema por defecto de la coordenada objeto.