Como todos sabemos, el lienzo es un mapa de bits y puedes representar lo que quieras en él, pero solo puedes editarlo manipulando las propiedades del lienzo. Es decir, no se pueden manipular cosas dibujadas en el lienzo. Por ejemplo, si agrego una pintura al lienzo y ahora quiero mover la pintura 10 píxeles, no podemos manipular la pintura directamente porque no podemos obtener la pintura en absoluto. . cualquier información. Todo lo que podemos obtener es el objeto lienzo.
Entonces aquí viene la pregunta, ¿cómo giro la imagen?De hecho, el lienzo proporciona varias interfaces para controlar el lienzo. Existe un método de rotación () para la rotación.
De hecho, la rotación aquí realmente no gira el lienzo. Por ejemplo, mi ctx.rotate(Math.PI/2) gira 90°. No significa que veremos el lienzo girado 90° en la página. Podemos entender que el lienzo en realidad consta de dos partes, una es el lienzo visible a simple vista y la otra es el lienzo virtual utilizado para las operaciones. Todas nuestras acciones en el lienzo virtual se asignarán al lienzo real.
Puede resultar difícil entender esto, así que usemos una imagen para explicarlo. Primero, introduzcamos el método rotar (). Puede rotar el lienzo y rotar el origen del lienzo de forma predeterminada.
Echemos un vistazo al efecto de girar 45°:
Aquí podemos ver que el lienzo virtual que acabo de mencionar se gira 45° y luego se inserta una imagen en el lienzo virtual. Entonces lo que presenta el lienzo real es la intersección del lienzo virtual y el lienzo real. Puede que no sea fácil de entender aquí, piénselo detenidamente.
El código para las dos imágenes es el siguiente:
// var sin girar img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.drawImage(img, 0, 0)// Rotación en sentido antihorario 45° var img = document.getElementById('img')var lienzo = document.getElementById('canvas')var ctx = lienzo.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)Al ver esto, creo que básicamente todos saben cómo usar rotar ().
Hablemos de cómo rotar el centro de la imagen.
Permítanme hablar sobre cómo usar los otros dos métodos de lienzo:
ctx.translate (x, y): este método es un método que puede mover el origen del lienzo. Los parámetros son xey;
ctx.drawImage (img, x, y): este método se ha utilizado anteriormente, pero tiene tres parámetros. El primero es el dom de la imagen que se insertará y los dos siguientes, xey, son los parámetros para img cuando. insertando la imagen. Se modifica la ubicación.
Como se puede ver en la imagen, si desea rotar 45° alrededor del centro de la imagen, debe mover el origen del lienzo al centro de la imagen, luego rotar el lienzo y luego, al insertar la imagen, traduce la imagen a la esquina superior izquierda por la mitad de la imagen misma.
Hay tres pasos aquí:
Echemos un vistazo a estos tres pasos por separado (el ancho y el alto de la imagen son 400 y 300)
Mover origen del lienzo
var img = document.getElementById('img')var lienzo = document.getElementById('canvas')var ctx = lienzo.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)Girar lienzo
var img = document.getElementById('img')var lienzo = document.getElementById('canvas')var ctx = lienzo.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImagen(img, 0, 0)Insertar imagen y mover
var img = document.getElementById('img')var lienzo = document.getElementById('canvas')var ctx = lienzo.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)Eso es todo, ya terminaste
PD: Después de completar una serie de acciones, todos deben rotar el origen del lienzo para restaurarlo. De lo contrario, después de una serie de operaciones, la configuración del lienzo se estropeará. Simplemente restaure la configuración a su estado original después de cada operación.
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// Restaurar la configuración (los pasos para restaurar deben revertirse a los pasos que modificó) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// Después de eso, el origen del El lienzo vuelve al ángulo superior izquierdo, el ángulo de rotación es 0//Otras operaciones...Otra cosa a tener en cuenta es que lo que acabo de demostrar es un ejemplo en el que los ejes x e y de la imagen en relación con el lienzo son 0. Si no es 0, simplemente mueva el origen ctx.translate(200+x, 150+año). Los 200 y 150 aquí son la mitad del ancho y el alto de la imagen, y xey son los xey de la imagen en relación con el lienzo.
Este artículo solo habla sobre la rotación en el centro de la imagen. Más adelante escribiré sobre la rotación y el escalado de la imagen. Si hay algo mal escrito o incorrecto, indíquelo.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.