Вращение на холсте

Question

Я рисую некоторые фигуры на холсте, но вращение меня бесит. Из учебников, которые я нашел, не могу найти решение из-за моей тупой головы, или они не показывают интерактивное преобразование, или оба.

Я создал код, который рисует некоторые фигуры с событиями mousedown - mousemove - mouseup, но я хочу вращаться, когда точка mousemove включена ... (x1, y1) - начальная точка и (x2, y2) конечная точка Пожалуйста, будьте свободны, чтобы обновить код ниже:

context.strokeRect(x1, y1, x2-x1, y2-y1);

Итак, что конкретно я мог бы написать для этих прямоугольников, следующих за точкой (x2, y2), удерживая кнопку?

Answer 1

Я нашел решение, следуйте коду:

var xd = x2-x1,
yd = y2-y1;
var theta = Math.atan2(yd, xd); 
var deg = theta*180/Math.PI;
var xyd = Math.sqrt((xd*xd)+(yd*yd));


context.lineWidth = 1;
context.lineCap = "square";
context.strokeStyle = "#856020";
context.save();
context.translate(x1,y1);
context.rotate(theta);
context.strokeRect(0,0,xyd,yd);
context.restore();