Javascript 画布-旋转线

我是画布新手，我需要做一些在谷歌上找不到答案的事情

假设我有一条带起点和终点的线。 我需要绕着起点旋转这条线

以下是JSFIDLE：

我也愿意使用任何画布库。

---

我知道这会更简单，但我不知道选择哪一个

您可以使用变换来旋转绘制到画布上的线条或任何形状。要旋转：

• 平移到轴心点，即旋转点
• 应用旋转变换
• 翻译回
• 画图

在您的情况下，如果我们说绕线的中间旋转：

var-cd；
var-ctx2；
var起始点；
var终点；
var中点；
函数init（）{
cd=document.getElementById（“canvas2”）；
cd.宽度=500；
cd.高度=500；
ctx2=cd.getContext（“2d”）；
}
函数绘图（）{
起始点={
x:200，
y:200
};
端点={
x:startPoint.x+100，
y:startPoint.y+100
};
ctx2.beginPath（）；
ctx2.setLineDash（[1,2]）；
//围绕中心旋转-使用lerp查找中点
中点={
x:startPoint.x+（endPoint.x-startPoint.x）*0.5，
y:startPoint.y+（endPoint.y-startPoint.y）*0.5
};
//平移到中点
ctx2.平移（中点x，中点y）；
//旋转一定角度（弧度）
ctx2.旋转（0.25*Math.PI）；/=45°
//翻译回
ctx2.translate（-middpoint.x，-middpoint.y）；
//划线
ctx2.moveTo（startPoint.x，startPoint.y）；
ctx2.lineTo（端点.x，端点.y）；
ctx2.stroke（）；
ctx2.closePath（）；
//重置变换
ctx2.setTransform（1,0,0,1,0,0）；
}
init（）；
draw（）
您可以使用变换旋转绘制到画布上的线条或任何形状。要旋转：


平移到轴心点，即旋转点
应用旋转变换
翻译回
画图

在您的情况下，如果我们说绕线的中间旋转：


var-cd；
var-ctx2；
var起始点；
var终点；
var中点；
函数init（）{
cd=document.getElementById（“canvas2”）；
cd.宽度=500；
cd.高度=500；
ctx2=cd.getContext（“2d”）；
}
函数绘图（）{
起始点={
x:200，
y:200
};
端点={
x:startPoint.x+100，
y:startPoint.y+100
};
ctx2.beginPath（）；
ctx2.setLineDash（[1,2]）；
//围绕中心旋转-使用lerp查找中点
中点={
x:startPoint.x+（endPoint.x-startPoint.x）*0.5，
y:startPoint.y+（endPoint.y-startPoint.y）*0.5
};
//平移到中点
ctx2.平移（中点x，中点y）；
//旋转一定角度（弧度）
ctx2.旋转（0.25*Math.PI）；/=45°
//翻译回
ctx2.translate（-middpoint.x，-middpoint.y）；
//划线
ctx2.moveTo（startPoint.x，startPoint.y）；
ctx2.lineTo（端点.x，端点.y）；
ctx2.stroke（）；
ctx2.closePath（）；
//重置变换
ctx2.setTransform（1,0,0,1,0,0）；
}
init（）；
draw（）

是的，就是这个主意！正如我所说的：我想围绕起始点旋转（所以我将中点更改为起始点），下一步是使用鼠标实时旋转它。我认为使用KineticJs这样的库会更简单，对吗？是的，这就是想法！正如我所说的：我想围绕起始点旋转（所以我将中点更改为起始点），下一步是使用鼠标实时旋转它。我认为使用KineticJs这样的库会更简单，对吗？
var cd;
var ctx2;
var startPoint;
var endPoint;
        function init(){
            cd= document.getElementById("canvas2");
            cd.width=500;
            cd.height=500;

            ctx2=cd.getContext("2d");
        }


        function draw(){
            startPoint={ x:200, y:200};
            endPoint={ x:startPoint.x+100, y:startPoint.y+100};

            ctx2.beginPath();
                ctx2.setLineDash([1,2]);
                ctx2.moveTo(startPoint.x,startPoint.y);
                ctx2.lineTo(endPoint.x,endPoint.y);
                ctx2.stroke();
                ctx2.closePath();            
        }

init();
draw();