Как избежать, чтобы сокращение изображения с <холстом> вращалось?
3 ответа
Вращение всегда происходит вокруг текущего источника. Таким образом, Вы могли бы хотеть использовать, переводят сначала для перевода холста в положение, вокруг которого Вы хотите вращаться (скажите, что центр), затем вращаются.
, например,
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();
Надеюсь, это кому-то поможет :)