Как избежать обрезки изображения при повороте <canvas>?
Когда вы поворачиваете изображение с помощью холста, оно обрезается - как этого избежать? Я уже сделал элемент холста больше, чем изображение, но он все еще обрезал края.
Пример:
<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>
Ответы 4
Вращение всегда происходит вокруг текущего начала координат. Таким образом, вы можете сначала использовать translate, чтобы перевести холст в положение, вокруг которого вы хотите повернуть (например, в центр), а затем повернуть.
например
ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180);
Теперь холст вращается вокруг (85, 85).
В дополнение к повороту холста перед поворотом вам нужно будет снова использовать «перевод» непосредственно перед размещением изображения, например:
ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180); // for 5 degrees like the example from Vincent
А затем, непосредственно перед добавлением изображения, снова используйте перевод
ctx.translate(-85, -85);
Это переместит координату (0,0) ctx.drawImage (img, 0,0,10,10) обратно к ожидаемой координате 0,0 CANVAS.
или просто включите функции сохранения и восстановления в холсте
ctx.save();
ctx.translate(85,85);
ctx.rotate(5 * Math.PI / 180);
ctx.fillRect(10,10,10,10);
ctx.restore();
Если вы хотите вращать вокруг оси нарисованных объектов, вы должны перемещать объекты по x и y. Тогда при создании объекта его положение по x будет отрицательным на половине его ширины, а y будет отрицательным на половине его высоты.
Пример:
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();
Надеюсь, это кому-то поможет :)
Я создал полноценную функцию, которая упорядочивает изображение по углу и положению.
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/>
}