Como todos sabemos, o canvas é um bitmap e você pode renderizar o que quiser nele, mas só pode editá-lo manipulando as propriedades do canvas. Ou seja, você não pode manipular coisas desenhadas na tela. Por exemplo, se eu adicionar uma pintura à tela e agora quiser mover a pintura 10px, não poderemos manipular diretamente a pintura porque não podemos obter a pintura. . qualquer informação. Tudo o que podemos obter é o objeto canvas.
Então aí vem a pergunta: como faço para girar a imagem?Na verdade, o canvas fornece várias interfaces para controlar o canvas. Existe um método rotate() para rotação.
Na verdade, a rotação aqui não gira realmente a tela. Por exemplo, meu ctx.rotate(Math.PI/2) gira 90°. Isso não significa que veremos a tela girada 90° na página. Podemos entender que a tela na verdade consiste em duas partes, uma é a tela visível a olho nu e a outra é a tela virtual usada para operações. Todas as nossas ações na tela virtual serão mapeadas para a tela real.
Pode ser difícil entender isso, então vamos usar uma imagem para explicar. Primeiro, vamos apresentar o método rotate(). Ele pode girar a tela e girar a origem da tela por padrão.
Vamos dar uma olhada no efeito da rotação de 45°:
Aqui podemos ver que a tela virtual que acabei de mencionar é girada 45° e então uma imagem é inserida na tela virtual. Então o que a tela real apresenta é a intersecção da tela virtual e da tela real. Pode não ser fácil de entender aqui, por favor pense nisso com cuidado.
O código das duas imagens é o seguinte:
// Var não girado img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.drawImage(img, 0, 0)// Rotação anti-horária 45° var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)Vendo isso, acho que basicamente todo mundo sabe como usar rotar().
Vamos falar sobre como girar o centro da imagem
Deixe-me falar sobre como usar os outros dois métodos de canvas:
ctx.translate(x, y): Este método é um método que pode mover a origem da tela. Os parâmetros são x e y;
ctx.drawImage(img, x, y): Este método foi usado acima, mas possui três parâmetros. O primeiro é o dom da imagem a ser inserida, e os próximos dois x e y são os parâmetros para img quando. inserir a imagem O local é modificado.
Como pode ser visto na imagem, se você quiser girar 45° em torno do centro da imagem, você deve mover a origem da tela para o centro da imagem, depois girar a tela e, ao inserir a imagem, transfira a imagem para o canto superior esquerdo pela metade da própria imagem.
Existem três etapas aqui:
Vamos dar uma olhada nessas três etapas separadamente (a largura e a altura da imagem são 400 e 300)
Mover origem da tela
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)Girar tela
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)Insira a imagem e mova
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)É isso, você terminou
ps: Após completar uma série de ações, todos devem girar a origem da tela para restaurá-la. Caso contrário, após uma série de operações, as configurações da tela ficarão confusas. Basta restaurar as configurações ao estado original após cada operação.
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 configurações (as etapas para restaurar devem ser invertidas para as etapas que você modificou) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// Depois disso, a origem do canvas retorna para o canto superior esquerdo Ângulo, o ângulo de rotação é 0//Outras operações...Outra coisa a notar é que o que acabei de demonstrar é um exemplo onde os eixos xey da imagem em relação à tela são 0. Se não for 0, basta mover a origem ctx.translate(200+x, 150 +y). Os 200 e 150 aqui são metade da largura e altura da imagem, e xey são os xey da imagem em relação à tela.
Este artigo fala apenas sobre rotação no centro da imagem. Posteriormente escreverei sobre rotação e dimensionamento da imagem. Se houver algo mal escrito ou errado, aponte.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.