HTML5 Canvas DrawImage с углом - PullRequest
Новая
       8

HTML5 Canvas DrawImage с углом

31 голосов
/ 25 сентября 2010

Я экспериментирую с анимацией в <canvas> и не могу понять, как нарисовать изображение под углом.Желаемый эффект - это несколько изображений, нарисованных как обычно, с одним изображением, вращающимся медленно.(Это изображение не в центре экрана, если это имеет какое-либо значение).

Ответы [ 3 ]

62 голосов
/ 25 сентября 2010

Вам необходимо изменить матрицу преобразования перед рисованием изображения, которое вы хотите повернуть.

Предположим, что изображение указывает на объект 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 - это центризображения на холсте.

8 голосов
/ 05 июня 2014

Я написал функцию (основываясь на ответе Якуба), которая позволяет пользователю рисовать изображение в позиции 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 );
4 голосов
/ 25 октября 2017

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

ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();

, где (positionX, positionY) - это координаты на холсте, в котором я хочу разместить изображение, а (x, y) - это точка на изображении, в которую я хочу повернуть изображение.

...