mostrar - recortar imagen canvas
Cómo evitar el corte de imagen con<canvas> rotar? (4)
La rotación siempre ocurre alrededor del origen actual. Así que es posible que desee usar traducir primero para traducir el lienzo a la posición alrededor del cual desea rotar (digamos el centro) y luego girar.
p.ej
ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180);
El lienzo ahora gira alrededor (85, 85).
Cuando gira una imagen usando lienzo, se cortará, ¿cómo puedo evitar esto? Ya hice el elemento de lona más grande que la imagen, pero aún está cortando los bordes.
Ejemplo:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function startup() {
var canvas = document.getElementById(''canvas'');
var ctx = canvas.getContext(''2d'');
var img = new Image();
img.src = ''player.gif'';
img.onload = function() {
ctx.rotate(5 * Math.PI / 180);
ctx.drawImage(img, 0, 0, 64, 120);
}
}
</script>
</head>
<body onload=''startup();''>
<canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
</body>
</html>
Además de rotar el lienzo antes de rotar, necesitará usar "traducir" de nuevo justo antes de colocar la imagen, así:
ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180); // for 5 degrees like the example from Vincent
Y luego, justo antes de agregar la imagen, usa traducir de nuevo
ctx.translate(-85, -85);
Esto moverá la coordenada (0,0) de ctx.drawImage (img, 0,0,10,10) a la coordenada 0,0 esperada de la LONA.
o simplemente incluye las funciones de guardar y restaurar en el lienzo
ctx.save();
ctx.translate(85,85);
ctx.rotate(5 * Math.PI / 180);
ctx.fillRect(10,10,10,10);
ctx.restore();
Si desea rotar alrededor del eje de objetos dibujados, debe traducir por los objetos x ubicación y ubicación y. Luego, al crear el objeto, su ubicación x sería la mitad de su ancho negativo y la y sería la mitad de su altura negativa.
Ejemplo:
Square = {
x:10,
y:10,
width:10,
height:10,
angle:5
}
ctx.save();
ctx.translate(Square.x,Square.y);
ctx.rotate(Square.angle * Math.PI / 180);
ctx.fillRect(-Square.width/2,-Square.height/2,Square.width,Square.height);
ctx.restore();
Espero que esto ayude a alguien :)
Creé una función completa que organiza la imagen de acuerdo con el ángulo y la posición
function drawImage(myContext,imgSrc, x, y, size, rotate) {<br/>
var halfS = size / 2;<br/>
var imageCursor = new Image();<br/>
imageCursor.src = imgSrc;<br/>
myContext.save();<br/>
var tX = x - halfS;<br/>
var tY = y - halfS;<br/>
myContext.translate(tX, tY);<br/>
myContext.rotate(Math.PI / 180 * rotate);<br/>
var dX = 0, dY = 0;<br/>
if (rotate == 0) { dX = 0; dY = 0; }<br/>
else if (rotate > 0 && rotate < 90) { dX = 0; dY = -(size / (90 / rotate)); }<br/>
else if (rotate == 90) { dX = 0; dY = -size; }<br/>
else if (rotate > 90 && rotate < 180) { dX = -(size / (90 / (rotate - 90))); dY = -size; }<br/>
else if (rotate == 180) { dX = dY = -size; }<br/>
else if (rotate > 180 && rotate < 270) { dX = -size; dY = -size + (size / (90 / (rotate - 180))); }<br/>
else if (rotate == 270) { dX = -size; dY = 0; }<br/>
else if (rotate > 270 && rotate < 360) { dX = -size + (size / (90 / (rotate - 270))); dY = 0; }<br/>
else if (rotate == 360) { dX = 0; dY = 0; }<br/>
myContext.drawImage(imageCursor, dX, dY, size, size);<br/>
myContext.restore();<br/>
}