Я экспериментирую с анимацией в <canvas>
и не могу разобраться, как рисовать изображение под углом. Желаемый эффект - это несколько изображений, выполненных как обычно, причем одно изображение медленно вращается. (Это изображение не находится в центре экрана, если это имеет значение).
HTML5 холст drawImage под углом
Ответ 1
Вам нужно изменить матрицу преобразования, прежде чем рисовать изображение, которое вы хотите повернуть.
Предположим, что изображение указывает на объект HTMLImageElement.
var x = canvas.width / 2;
var y = canvas.height / 2;
var width = image.width;
var height = image.height;
context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);
Координаты x, y - это центр изображения на холсте.
Ответ 2
Я написал функцию (на основе ответа Jakub), которая позволяет пользователю рисовать изображение в позиции X, Y на основе пользовательского вращения в пользовательской точке вращения:
function rotateAndPaintImage ( context, image, angleInRad , positionX, positionY, axisX, axisY ) {
context.translate( positionX, positionY );
context.rotate( angleInRad );
context.drawImage( image, -axisX, -axisY );
context.rotate( -angleInRad );
context.translate( -positionX, -positionY );
}
Затем вы можете вызвать его так:
var TO_RADIANS = Math.PI/180;
ctx = document.getElementById("canvasDiv").getContext("2d");
var imgSprite = new Image();
imgSprite.src = "img/sprite.png";
// rotate 45º image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100
rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );
Ответ 3
Интересно, что первое решение работало для стольких людей, оно не дало результата, который мне нужен. В конце концов я должен был сделать это:
ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();
где (positionX, positionY)
- это координаты на холсте, в которых я хочу, чтобы изображение было расположено, а (x, y)
- точка на изображении, где я хочу, чтобы изображение вращалось.