Повернуть прямоугольник с математикой

Question

Я хочу, чтобы повернуть прямоугольник как это:

Я не хочу использовать save(), translate(), rotate() и restore(). Я хочу использовать простую математику для этого. Вот пример того, что я сделал уже:

demo

Как добиться этого?

Answer 1

Таким образом, вам необходимо вычислить каждый угол и нарисовать прямоугольник, используя .lineTo() вместо .fillRect().

Чтобы повернуть точку вокруг координат на угол вам это нужно:

var rotate = function(point, origin, angle) { 
    angle = angle * Math.PI/180.0; 
    return { 
     x: Math.cos(angle) * (point.x-origin.x) - Math.sin(angle) * (point.y -origin.y) + origin.x, 
     y: Math.sin(angle) * (point.x-origin.x) + Math.cos(angle) * (point.y-origin.y) + origin.y 
    }; 
} 

Затем определите прямоугольник углы:

var corners = [ 
     { x: 100, y: 0 }, 
     { x: 150, y: 0 }, 
     { x: 150, y: 50 }, 
     { x: 100, y: 50 } 
    ]; 

И делают это так:

// for example: 
    // origin = { x: 125, y: 175 }, angle = 30; 
    ctx.beginPath(); 
    corners.forEach(function(point){ 
     var rotated = rotate(point, origin, angle); 
     ctx.lineTo(rotated.x, rotated.y); 
    }); 
    ctx.closePath(); 
    ctx.fill(); 

http://jsfiddle.net/grcbab4h/3/