Javascript 画布、多个矩形、旋转

我有一个画布，我在其中添加了几个矩形。我可以在一个现在选中的矩形中添加文本。我还实现了一些其他功能，如拖动矩形，调整它们的大小。但是现在我的任务是旋转一个现在选中的矩形。有人能建议如何做吗？这样我的调整大小功能也可以与旋转同时工作。我想在JavaScript中执行此操作。

将矩形定义保存在JavaScript对象中，并将矩形对象放入数组中：

var rects=[];
rects.push({
    x:50,y:50,
    w:50,h:35,
    color:'green',
    angle:0,deltaAngle:(Math.PI*2)/60,
    scale:100,scaleDirection:1}
);
rects.push({
    x:150,y:50,
    w:50,h:35,
    color:'blue',
    angle:0,deltaAngle:(Math.PI*2)/60,
    scale:100,scaleDirection:1}
);

然后，您可以在下一个循环中使用变换移动、旋转和缩放绘制矩形：

---

迭代数组并绘制每个矩形：对于var i=0；i、 ，谢谢你的回复。我正在按照你的建议做这项工作，比如使用数组并为不同的矩形推送数据。。。问题是我需要动态获取角度，我不知道如何在JavaScript中获取角度。我的每个矩形周围有8个点。这意味着这些点是小矩形，在鼠标按下事件中，我想旋转当前选定的矩形。我是这个网站的新手，不知道如何显示我的代码。函数addRectx，y，w，h，fill，text，FontSize、TextColor、TextFontFamily、角度、缩放宽度、缩放高度{var rect=new Box2；rect.x=x；rect.y=y；rect.w=w rect.h=h；rect.Owntext=text；rect.FontSize=FontSize；rect.TextColor=TextColor；rect.TextFontFamily=TextFontFamily；rect.Angle=Angle；rect.ScaleWidth=ScaleWidth；rect.ScaleHeight=ScaleHeight；//alertfill；rect.fill=fill；boxes2.pushrect；invalidate；}函数mainDraw{//alert'mainDraw'；if canvasValid==false{clearctx；var l=boxes2.length；var font=0；for var i=0；ivar dx=mouseX-centerX; var dy=mouseY-centerY; var radianAngle=Math.atan2(dy,dx);