var papel = document.getElementById("papel");
var lapiz = papel.getContext("2d");
// Tracemos un rectangulo
lapiz.beginPath();
lapiz.moveTo(50,50);
lapiz.lineTo(200,50);
lapiz.lineTo(200,100);
lapiz.lineTo(50,100);
lapiz.closePath();
lapiz.stroke();
//Tomemos este rectangulo como source y copiemoslo en 130,150
var verticeX = 250;
var verticeY = 50;
var ancho = 170
var altura = 70;
lapiz.drawImage(papel, 40, 40, 170, 70, verticeX, verticeY, ancho, altura);
//Copiemos otro pero rotado alrededor del centro
//con "translate" corremos el 0,0 al centro del punto donde vamos a ubicar la imagen rotada
lapiz.translate(verticeX + ancho/2, verticeY + altura/2);
//Usando "rotate" giramos los ejes en sentido horario en un angulo en radianes
lapiz.rotate(Math.PI/20);
//Pegamos la imagen en -ancho/2 y -altura/2 (el 0,0 es el centro de la imagen)
lapiz.drawImage(papel, 40, 40, 170, 70, -ancho/2, -altura/2, ancho, altura);
//Cada rotate genera un giro extra
lapiz.rotate(Math.PI/20);
lapiz.drawImage(papel, 40, 40, 170, 70, -ancho/2, -altura/2, ancho, altura);
lapiz.rotate(Math.PI/20);
lapiz.drawImage(papel, 40, 40, 170, 70, -ancho/2, -altura/2, ancho, altura);
旋转通常并不容易,因为它们取决于所选的旋转中心。每个画布都有一个 0,0,默认情况下它位于左上角。这个点是所有旋转的中心。
如果要粘贴图像并依次旋转,请执行以下步骤:
translate
:将 0,0 移动到易于处理的位置。放置此图像的中心就是其中之一。rotate
: 将 x,y 轴系统旋转一个以弧度为单位的角度drawImage
:将图像粘贴到新的坐标系中。尝试
ctx.rotate(numeroDeRadianes)
1 整圈 2pi 弧度