Javascript 在HTML5画布上旋转正方形的轴？

我想创建一个函数，使正方形绕其轴旋转

var halfWidth = canvas.width/2;
var halfHeight = canvas.height/2;

var x = halfWidth-10;
var y = halfHeight-10;
var w = 20;
var h = 20;
var deg = 45;

rotate(x, y, w, h, deg);

ctx.fillRect(x, y, w, h);

职能：

function rotate(x, y, w, h, deg) {
    // ctx.translate() and ctx.rotate()
    // goes here.
}

---

如何做到这一点？

如果我没记错的话，所涉及的平移类似于首先平移到矩形的中心点，然后旋转所需的量，然后绘制。或者可能先旋转，然后翻译，我有点生疏=）

谢谢链接

var cx = canvas.width/2;
var cy = canvas.height/2;

var x = -10;
var y = -10;
var w = 20;
var h = 20;
var deg = 45;

ctx.save();

ctx.translate(cx, cy);
ctx.rotate(deg * Math.PI/180);

ctx.fillRect(x, y, w, h);

ctx.restore();

说明：

• ctx.save（）

  保存坐标系的当前状态

• ctx.translate（cx，cy）

  将原点更改为画布的中心

• ctx.rotate（deg*Math.PI/180）

  将正方形旋转45度（请注意，该参数以弧度表示，而不是以度表示）

• ctx.fillRect（x，y，w，h）

  绘制正方形

• ctx.restore（）

  恢复坐标系的最后状态

.

以下是我的看法：

JAVASCRIPT

var canvas = document.getElementById("myCanvas");
var ctx2 = canvas.getContext("2d");
ctx2.fillStyle='#333';

ctx2.fillRect(50,50,100,100);
var ctx = canvas.getContext("2d");


ctx.fillStyle='red';

var deg = Math.PI/180;

ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(45 * deg);
    ctx.fillRect(-50,-50,100,100);
ctx.restore();

ctx2是形状的旧位置，ctx是形状的新位置。您必须根据要定位形状的位置，使用相同的x、y坐标平移形状。然后您必须输入值到

ctx.fillRect（x，y，w，h）将x和y保留为-ve值（高度和宽度的一半以使其保持在画布的对角线上，否则更改以操纵它）。h，w为所需值

类似于@kavinshah-不幸的是，回答这个问题的人没有费心发布他们的代码，现在他们的小提琴已经过期了。始终发布代码！