Índice

Transformaciones

Hasta el momento hemos visto los diseños incluidos mediante la etiqueta <canvas> de forma estática. No obstante, existen distintas transformaciones que permiten hacer que los elementos sean dinámicos.

Translación

La función translate(x,y) desplaza un elemento del área de dibujo desde su origen hacia un nuevo punto indicado por las coordenadas x e y.

Rotación

La función rotate(angulo) se utiliza para hacer rotar un elemento respecto a su punto de origen. El parámetro ángulo, expresado en radianes, define la rotación en el sentido de las agujas del reloj.

Observe que el punto central de la rotación siempre es el punto de origen. Para modificarlo, es necesario desplazar el elemento con ayuda de la función translate.

Cambio de escala

El cambio de escala permite aumentar o disminuir el tamaño de los elementos del área de dibujo. Se utiliza la función scale(x,y), donde x es el factor de escalado en la dirección horizontal e y el de la dirección vertical. Ambos parámetros deben ser positivos. Valores inferiores a 1.0 permiten reducir el tamaño de la unidad, y valores superiores a 1.0 aumentan el tamaño de la unidad. Posicionar el factor de escala exactamente a 1.0 no tiene efecto alguno sobre el tamaño de la unidad.

De este modo, como la unidad básica es el píxel, si aplicamos un factor de escala de 0.5, la unidad resultante se convierte en 0.5 píxeles y las formas diseñadas ...