Javascript 如何在七巧板游戏中旋转形状而不使用“context.rotate”`

帆布600*600 变换的三个点是（100100），（300100），（200200） 旋转中心为（200100）

我想实现拖动变速箱旋转。但我不知道如何改变这些点的坐标

ps：我知道如何计算旋转角度 var rotateRadian=Math.atan2（mouseY-center.y，mouseX-center.x）-Math.atan2（startDragPosition.y-center.y，startDragPosition.x-center.x）

[下面评论中的其他信息]

---

我想做一个七巧板，有长方形、三角形和平行四边形。

你有一个好的开始

首先计算鼠标到中心点的角度：

// calc mouse angle
var dx=mouseX-centerX;
var dy=mouseY-centerY;
radianAngle=Math.atan2(dy,dx);

因为你有一个等边三角形，你的三角形是一个正多边形。使用三角学计算多边形的3个旋转点：

// vertex#1
var x1=cx+radius*Math.cos(rotationAngle);
var y1=cy+radius*Math.sin(rotationAngle);

// vertex#2
rotationAngle+=PI2/3;
var x2=cx+radius*Math.cos(rotationAngle);
var y2=cy+radius*Math.sin(rotationAngle);

// vertex#3
rotationAngle+=PI2/3;
var x3=cx+radius*Math.cos(rotationAngle);
var y3=cy+radius*Math.sin(rotationAngle);

然后只需监听mousemove事件并相应地重新绘制三角形：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var scrollX=$canvas.scrollLeft（）；
var scrollY=$canvas.scrollTop（）；
ctx.fillStyle='red'；
ctx.strokeStyle='blue'；
ctx.线宽=2；
var isDown=假；
var-startX；
var startY；
var PI2=数学PI*2；
var-cx=150；
var-cy=150；
var边长=50；
var初始值=0；
变量半径=边长*数学sqrt（3）/3；
抽签（200200）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
功能图（mx，my）{
//
var dx=mx cx；
var dy=我的cy；
var currentAngle=数学atan2（dy，dx）；
var rotationAngle=当前角度原点；
//顶点#1
var x1=cx+半径*数学cos（旋转角度）；
变量y1=cy+半径*数学sin（旋转角度）；
//顶点#2
旋转角度+=PI2/3；
var x2=cx+半径*数学cos（旋转角度）；
变量y2=cy+半径*数学sin（旋转角度）；
//顶点#3
旋转角度+=PI2/3；
var x3=cx+半径*数学cos（旋转角度）；
变量y3=cy+半径*数学sin（旋转角度）；
ctx.clearRect（0,0，cw，ch）；
ctx.beginPath（）；
ctx.moveTo（x1，y1）；
ctx.lineTo（x2，y2）；
ctx.lineTo（x3，y3）；
ctx.closePath（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.弧（x1，y1,3,0，PI2）；
ctx.closePath（）；
ctx.fill（）；
}
功能手柄移动（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
mx=parseInt（e.clientX-offsetX）；
my=parseInt（e.clientY-offsetY）；
绘制（mx，my）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；}

三角形将根据鼠标旋转

很好，在您的示例中，三角形是正多边形。可以通过“rotationAngle+=PI2/3”计算角度；但在我目前的项目中，我想建立一个七巧板，有矩形、三角形和平行四边形。我不能再使用“rotationAngle+=PI2/3”…你能帮我吗？真的吗？！你的问题根本不涉及七巧板！数学是相似的，但更复杂，因为七巧板形状是不规则的。我在我的答案中添加了解释附加数学的内容。