Javascript HTML5画布计算旋转点

我正在做一个基于三角形图案的画布项目，我在旋转方面遇到了问题。我想生成6个相同的三角形，然后通过边将它们连接在一起。到目前为止，我已经计算了旋转所需的角度，并生成了三角形

我使用此处描述的旋转矩阵公式： 除了值有点偏离外，它几乎起作用

x = (200-cX) * Math.cos(sAngle*radians) - (150-cY) * Math.sin(sAngle*radians) + cX;
y = (200-cX) * Math.sin(sAngle*radians) + (150-cY) * Math.cos(sAngle*radians) + cY

以下是我目前的代码：

我之前也几乎做到了这一点，将距离更改为100，并稍微修改中心，但图案中存在间隙

我猜在形状旋转后，我的旋转中心值是错误的，但我不确定如何更正

---

谢谢您的帮助。

您的三角形配置形成正多边形

要计算所需正多边形的中心点==旋转点，请执行以下操作：

a起始侧点p0， 结束侧点p1， 边数 可以按如下方式计算中心点：

关于此插图：

蓝点是已知的中心点，是计算出的中心点要命中的目标 给定边上的黄金线段， 给定线段中点处的紫色圆点 从中点以90度角对线段进行绿色APO 计算出的中心点末端的红点 下面是示例代码和演示

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var cw=画布宽度； var ch=画布高度； //测试：获取正多边形的顶点 var点=调节性多基因点SCW/2，ch/2,7,75； //画多边形 绘图点点，5，“黑色”； //在多边形的实际中心点绘制一个点 //我们想用getCenter函数来达到这个中心点 dotcw/2，ch/2，“蓝色”，8； //一些公用事业 var-PI=Math.PI； var deg2rad=函数d{returnd*PI/180；} //给定侧数和一侧的起点+终点 var侧数=7； var p0=点数[0]； 变量p1=点[1]； //要求getCenter计算中心点 var center=getCentersidecount，p0，p1； // 函数getCentersidecount，p0，p1{ var dx=p1.x-p0.x； var-dy=p1.y-p0.y； var sidelength=Math.sqrtdx*dx+dy*dy； var sideangle=数学atan2dy，dx； var apothemAngle=侧角+PI/2； var apothem=边长/2*Math.tandeg2rad180/sidecount； var midX=p0.x+p1.x/2； var midY=p0.y+p1.y/2； var cx=midX+apothem*Math.cosapothemsangle； var cy=midY+apothem*Math.sinapothemAngle； //测试 //在给定的边上画一条黄金线段 //在给定线段的中点绘制一个紫色圆点 //在距离中点90度处绘制一条绿色apothem线段 //在apothem==中心点的末端绘制一个红点 // //从p0到p1的边线段 ctx.beginPath； ctx.moveTop0.x，p0.y； ctx.lineTop1.x，p1.y； ctx.线宽=3； ctx.strokeStyle='gold'； ctx.stroke； //中点 dotmidX，midY，'purple'，7； //apothem线段 ctx.beginPath； ctx.moveTomidX，midY； ctx.lineTocx，cy； ctx.线宽=3； ctx.strokeStyle='green'； ctx.stroke； //计算中心点 dotcx，cy，'red'，4； //返回中心点 返回{x:cx，y:cy}； } 函数dotx，y，color，r{ ctx.beginPath； ctx.arcx，y，r，0，Math.PI*2； ctx.closePath； ctx.fillStyle=颜色； ctx.fill； } 函数drawPointspoints、线宽、笔划样式{ ctx.beginPath； ctx.moveTopoints[0].x，点[0].y；

---

forvar i=1；iI通过计算点之间的差异并像这样平移三角形来解决这个问题，尽管知道公式哪里出错仍然会有帮助。

function getCenter(sidecount,p0,p1){
    var dx=p1.x-p0.x;
    var dy=p1.y-p0.y;
    var sidelength=Math.sqrt(dx*dx+dy*dy);
    var sideangle=Math.atan2(dy,dx);
    var apothemAngle=sideangle+PI/2;
    var apothem=sidelength/(2*Math.tan(deg2rad(180/sidecount)));
    var midX=(p0.x+p1.x)/2;
    var midY=(p0.y+p1.y)/2;
    var cx=midX+apothem*Math.cos(apothemAngle);
    var cy=midY+apothem*Math.sin(apothemAngle);
    return({x:cx,y:cy});
}