HTML5 Transformación del lienzo

HTML5 Métodos de transformación del lienzo, demostración en línea de cómo usar HTML5 Lienzo para rotar, mover, escalar, rotar alrededor de diferentes puntos, ajustar la escala, etc.

Puede aplicar transformaciones a HTML5Cualquier contenido dibujado en la lienzo. Esta es la lista de transformaciones que puede aplicar:

• mover (mover el contenido dibujado)

• rotación

• escala

En este artículo se presentan todas estas transformaciones

matriz de transformación

Se puede2Establezca la matriz de transformación en el contexto D. Esta matriz se multiplicará por todo el contenido dibujado en la lienzo. Para los ejemplos utilizados en este tutorial, la he configurado como la matriz de identidad, que multiplica las coordenadas x, y, resultando en x, y. En otras palabras, no se realiza ninguna transformación.
Este es el método para establecer la matriz de transformación en la matriz de identidad:

context.setTransform(1,　0,　0,　1,　0,　0);

movimiento

Se puede aplicar el movimiento a todo lo dibujado en el canvas. El movimiento significa la relocalización del contenido dibujado. Esta es la forma en que se establece el movimiento en el código:

var　x　=　100;
var　y　=　　50;
context.translate(x,　y);

Este ejemplo moverá todas las formas dibujadas en el canvas en el eje x100，moverse en el eje y50。
Nota: El desplazamiento solo se aplica a las formas dibujadas después de la llamada a la función translate(). Las formas dibujadas antes de la llamada a esta función no se ven afectadas.
Este es otro ejemplo. Se han dibujado dos rectángulos en el mismo punto de coordenadas, pero se ha dibujado un rectángulo antes de la llamada a la función translate() y otro después.

<canvas id="ex1" anchura="500" altura="150" estilo="borde:　1px sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d);
context.fillStyle = "#ff0000";
context.fillRect(10,10,　100,　100);
context.translate(50,　25);
context.fillStyle = "#0000ff";
context.fillRect(10,10,　100,　100);
</script>

Este es el resultado de dibujar en el canvas:

rotación

Puede aplicar rotación automática a HTML5Cualquier forma dibujada en el canvas. Esto se hace a través de rotate()2La función completa en el contexto D. Este es un ejemplo simple:

context.rotate(radians);

El ángulo de rotación se pasa como parámetro a la función rotate(). Este valor debe estar en radianes en lugar de grados.
Todas las formas dibujadas después de establecer la rotación se girarán alrededor del punto 0,0 del canvas. Esto es la esquina superior izquierda del canvas.
Al igual que el desplazamiento, la rotación solo se aplica a todas las formas dibujadas después de la llamada a la función rotate().
Este es un ejemplo de dibujar el mismo rectángulo antes y después de establecer la rotación:

<canvas id="ex2" anchura="500" altura="150" estilo="borde:　1px sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</canvas>
<script>
　var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d);
　context.fillStyle = "#ff0000";
　context.fillRect(10,10,　100,　100);
　context.rotate(　(Math.PI　/　180)　*　25);　　//girar　25　grados.
　context.fillStyle = "#0000ff";
　context.fillRect(10,10,　100,　100);
</script>

Esta es la apariencia cuando se dibuja un rectángulo en el canvas:

Girar alrededor de un punto diferente

Como se mencionó anteriormente, todas las formas se giran alrededor de la esquina superior izquierda del canvas (0,0). Pero, ¿qué pasa si desea que la forma gire alrededor de un punto diferente? Por ejemplo, ¿girar la forma alrededor de su propio centro?
Para girar una forma alrededor de su propio centro, primero debe desplazar el canvas al centro de la forma, luego girar el canvas, luego desplazar el canvas de vuelta a 0,0 y luego dibujar la forma.
Este es un ejemplo de código que hace que el rectángulo azul gire alrededor de su centro:

<canvas id="ex3" anchura="500" altura="150" estilo="borde:　1px sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d);
var x =　10;
var y =　10;
var width =　100;
var height =　100
var　cx　　　　　=　x　+　0.5　*　anchura;
var　cy　　　　　=　y　+　0.5　*　altura;
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.translate(cx,　cy);
context.rotate(　(Math.PI　/　180)　*　25);　　//girar　25　grados.
context.translate(-cx,　-cy);　//restablecer el centro a 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Esta es la apariencia cuando se dibuja en el canvas:

Este ejemplo primero desplaza el centro del canvas al centro del cuadrado (cx, cy). Luego, gira el canvas25El canvas se convierte nuevamente en 0,0. Ahora, el canvas gira alrededor de cx, cy25grados. Todo lo que dibuje se rotará alrededor de cx, cy. Finalmente, el rectángulo se dibuja como si nada hubiera pasado, pero ahora se rotará alrededor de cx, cy.25grados. Esto se puede lograr solo mediante llamadas a transformaciones. Las coordenadas del rectángulo no cambian. Notar que las dos llamadas a context.fillRect() para dibujar los rectángulos rojos y azules son idénticas. Es la llamada a la transformación entre ellas lo que las hace aparecer en diferentes posiciones y posiciones de rotación. Esas llamadas a transformación son las que las hacen aparecer en diferentes posiciones y posiciones de rotación

escala

Se puede aplicar el5Todas las formas dibujadas en el lienzo se aplican la escalado automático.
Al escalar, se puede escalar todas las coordenadas en el eje x e y mediante ciertos factores. Puede usar la función scale() para configurar estos factores, como se muestra a continuación:

var scaleX =　2;
var scaleY =　2;
context.scale(scaleX, scaleY);

En este ejemplo, todas las coordenadas en el eje x e y se escalan2veces.
Al igual que con translate() y rotate(), la proporción de escala solo se aplica a las formas dibujadas después de la llamada a scale().
Este es otro ejemplo de código para dibujar rectángulos rojos y azules en el lienzo, donde la proporción de escala se aplica al rectángulo azul:

<canvas id="ex5" anchura="500" altura="250" estilo="borde:　1px sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d);
var x =　10;
var y =　10;
var width =　100;
var height =　100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2,2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Estos son los gráficos generados en el lienzo:

Por favor, tenga en cuenta que el tamaño del rectángulo azul es el doble del del rectángulo rojo.
También hay que tener en cuenta que la distancia desde la esquina superior izquierda del rectángulo azul hasta la esquina superior izquierda del lienzo (0,0) es el doble. Todas las coordenadas se han escalado dos veces, y también lo es la esquina superior izquierda del rectángulo. Si se desea evitar que la forma se mueva durante la escalado, es necesario combinar la escalado con el desplazamiento.

proporción de escala

Puede usar la función de escala para lograr la función de escalado proporcional. El lienzo siguiente contiene4rectángulos. Debajo del lienzo hay un campo de entrada que se puede usar para cambiar el nivel de escala (proporción de escala).

Grado de escala:

Si ve un campo de texto con valores de escala, ingrese entre1a10Niveles de escala entre, luego salga del campo de texto para ver los resultados. Si ve un control deslizante, simplemente móvelo.

Combinación de traslación, rotación y escalado

Por supuesto, se pueden combinar las tres transformaciones en el mismo lienzo. Pero, al igual que al combinar rotación y traslación, es importante2La secuencia de llamadas a funciones en el contexto D también es muy importante. Si scale() se llama antes de translate() u otros, los resultados pueden parecer diferentes. Puede que necesite ajustar el orden de las llamadas a las funciones para que funcione correctamente