Поворот изображения на html5 canvas

Возможно, вы уже знаете что есть удобный метод canvas context drawImage:

context.drawImage(image, x, y);

где image - это DOM изображение (или другой canvas), x, y - левый верхний край изображения. Также там есть несколько опциональных параметров, но мы не будем их сегодня использовать. (Можете посмотреть чит-лист по canvas, который мы разместили вчера, если любознательны).

Что неочевидно, так это как отрисовать повернутое изображение. Вы, наверное, думаете, что должен быть параметр angle, который можно передать в drawImage? Но как бы не так, вам придется полностью повернуть систему координат перед отрисовкой.

Пример, с настроенным canvas context и загруженной картинкой, готовой к использованию:

context.drawImage(logoImage, 50, 35);

Рисуем изображение с точки с координатами 50, 35, что дает нам следующее изображение:

Продемонстрируем, что будет, если вначале повернуть систему координат:

context.rotate(0.5); 
context.drawImage(logoImage, 50, 35);

Что же случилось? Правильно, вся система координат повернулась на 0.5 радиан (около 30º) вокруг левого верхнего края canvas прежде чем мы поместили изображение. Если вы хорошо подумаете, то поймете, что координата 50, 35 не обозначает то же место, что раньше (в первом примере).

То как же нам повернуть изображение, но при этом сохранить его в том же месте? Для этого перед вызовом rotate необходимо переместить начало canvas в место, где мы хотим поместить изображение вызовом метода context.translate(x,y):

context.translate(50, 35); 
context.drawImage(logoImage, 0, 0);

Метод translate полностью перемещает систему координат; context.translate(50, 35) перемещает начало координат в 50, 35. Поэтому если мы теперь отрисуем изображение в координатах 0, 0 - это будет в точности как в первом примере:

Запомните, что метод rotate вращает вокруг начала координат. Поэтому, если мы переместим начало координат в 50, 35, поворот будет вокруг этой точки:

context.translate(50, 35); 
context.rotate(0.5); 
context.drawImage(logoImage, 0, 0);

Все это очень хорошо, но что, если мы хотим повернуть изображение вокруг центра? Что ж, мы должны переместить начало координат в центр того места, где хотим нарисовать изображение, но отрисовать изображение в точке, координаты которой смещены на пол высоты и ширины.

Слегка озадачены? Пример должен сделать вышесказанное более понятным:

// move the origin to 50, 35   
context.translate(50, 35); 
 
// now move across and down half the 
// width and height of the image (which is 128 x 128)
context.translate(64, 64); 
 
// rotate around this point
context.rotate(0.5); 
 
// then draw the image back and up
context.drawImage(logoImage, -64, -64);

Единственная вещь, которую осталось понять, это радианы но мы это уже объясняли, вы ведь видели?

И последнее: после трансляции и поворота, наша система координат вывернута, и нету способа вернуть ее обратно (даже не думайте о ресайзе canvas, чтобы сбросить ее!) Но мы можем сохранить вначале:

// save the context's co-ordinate system before 
// we screw with it
context.save(); 
 
// move the origin to 50, 35   
context.translate(50, 35); 
 
// now move across and down half the 
// width and height of the image (which is 128 x 128)
context.translate(64, 64); 
 
// rotate around this point
context.rotate(0.5); 
 
// then draw the image back and up
context.drawImage(logoImage, -64, -64); 
 
// and restore the co-ordinate system to its default
// top left origin with no rotation
context.restore();

Важное замечание: операции поворота и перемещения системы координат никак не влияют на уже отрисованные изображения, они влияют на то, что будет добавлено позже.

Теперь мы знаем, как нарисовать повернутое изображение, почему бы не сделать функцию, содержащую этот код?

var TO_RADIANS = Math.PI/180; 
function drawRotatedImage(image, x, y, angle) { 
 
	// save the current co-ordinate system 
	// before we screw with it
	context.save(); 
 
	// move to the middle of where we want to draw our image
	context.translate(x, y);
 
	// rotate around that point, converting our 
	// angle from degrees to radians 
	context.rotate(angle * TO_RADIANS);
 
	// draw it up and to the left by half the width
	// and height of the image 
	context.drawImage(image, -(image.width/2), -(image.height/2));
 
	// and restore the co-ords to how they were when we began
	context.restore(); 
}

Посмотреть пример в действии.

Стоит потратить время на то, чтобы правильно понять поворот, перемещение и сохранение системы координат - это очень мощные средства.

От переводчика: для понимания этой информации, я сделал пример из вращающимися шестиугольниками ;)

Источник: http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/