用数学旋转矩形

Question

我想像这样旋转矩形：

我不想使用 save()、translate()、rotate() 和 restore()。我想用简单的数学来做到这一点。这是我已经做过的一个例子：

如何实现？

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/

用数学旋转矩形

Rotate rectangle with math

javascript

animation

canvas

rotation