Eu tenho o seguinte código abaixo para poder rotacionar uma imagem através do canvas
.
function qs(selector) {
return document.querySelector(selector);
}
function rotacionar(canvas, image, angle)
{
canvas.height = image.height;
canvas.width = image.width;
var context = canvas.getContext('2d');
context.translate(image.width / 2, image.height / 2);
context.rotate(angle * Math.PI / 180)
context.drawImage(image, -image.width / 2, -image.height / 2);
}
function onLoad()
{
var canvas = qs('#canvas');
var image = qs('#image');
var btnRotate = qs('#rotate');
var angle = 0;
btnRotate.addEventListener('click', function () {
rotacionar(canvas, image, angle += 90);
});
}
window.addEventListener('load', onLoad)
<img id="image" src="data:image/jpeg;base64,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";">
<canvas id="canvas"></canvas>
<button id="rotate" style="display:block">
Rotate
</button>
A minha dúvida é em relação a esse trecho:
// A
canvas.height = image.height;
canvas.width = image.width;
var context = canvas.getContext('2d');
// B
context.translate(image.width / 2, image.height / 2);
// C
context.rotate(angle * Math.PI / 180)
// D
context.drawImage(image, -image.width / 2, -image.height / 2);
A) O canvas
é definido com as mesmas dimensões da imagem (altura e largura).
B) O método translate
de canvas.getContext('2d')
é chamado em
seguida, definido o primeiro parâmetro com o largura da imagem dividido por 2, e o segundo, a altura divido por 2.
C) é feita uma conversão de graus para alguma outra unidade que eu não sei qual é. Esse trecho é o angle * Math.PI / 180
. Esse é o momento que rotate
é chamado.
D) O método drawImage
é chamado em seguida, definindo que os parâmetros x
e y
terão os valores da largura e altura da imagem dividos por dois e negativos, respectivamente.
Sobre as etapas enumeradas acima:
- Por que em A, o canvas precisa ter as mesmas dimensões da imagem?
Por que em B, o canvas precisa ter os valores de
translate
precisa ter as medidas geométricas da imagem divididas por 2 (altura e largura)?Essa conversão que é feita em C, trata de qual escala de medida de rotação para qual?
Por que o método que desenha a imagem em D precisa ter os valores dividos por dois e negativados?