Javascript 交互式弹性线的画布框架？

我想为我的网页创建一条交互式弹性线，当用户悬停该线时，它会像弹性效果或橡皮筋拉伸效果一样进行动画处理，鼠标离开时，对象将恢复到原始形状

演示对象

我是HTML5 Canvas的新手，我希望用JavaScript Canvas库完成，但当我搜索最佳Canvas库时，我得到了更多的选项，所以我对选择哪一个来实现我的目标感到困惑，etc是流行的canvas库

我想知道哪个框架最适合我的目标

---

感谢并感谢您的帮助。

您正在寻找的技术是

多行简化

你的问题近乎离题，因为它要求图书馆推荐。但是，没有一个库可以自动为您描述的演示路径设置动画

所以我想说没有什么害处

可以将“摆动”路径定义并绘制为一组连接点（多段线）。然后，当用户离开路径时，可以使用路径简化算法删除多边形点，直到路径“变直”

该算法是一种有效的路径简化算法

---

路径简化的作用。在演示中，向右移动鼠标以简化路径，向左移动鼠标以显示更复杂的路径（complex==路径上的更多点）。

您正在寻找的技术是

多线简化

你的问题近乎离题，因为它要求图书馆推荐。但是，没有一个库可以自动为您描述的演示路径设置动画

所以我想说没有什么害处

可以将“摆动”路径定义并绘制为一组连接点（多段线）。然后，当用户离开路径时，可以使用路径简化算法删除多边形点，直到路径“变直”

该算法是一种有效的路径简化算法

---

路径简化的作用。在演示中，向右移动鼠标以简化路径，向左移动鼠标以显示更复杂的路径（complex==路径上的更多点）。

您需要使用反向运动学，或者更具体地说，使用反向运动学

有许多方法或多或少比较复杂。下面是一个简单的方法，它允许您拖动端点，其余的将跟随。它并不完美，但可能会达到这个目的

（逆）运动链 主要功能如下。它假定定义了带有点的数组以及

距离
变量：

// calculate IK chain (from last to first)
function calc() {

    var angle, i, p1, p2;

    for(i = points.length - 1; i > 0; i--) {
        p1 = points[i];                                // current point
        p2 = points[i-1];                              // previous point
        angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);  // calc angle

        p2.x = p1.x + distance * Math.cos(angle);      // update previous point
        p2.y = p1.y + distance * Math.sin(angle);      // based on a fixed distance
    }
}

请注意，
distance
变量设置为固定长度，这是此处的关键

我们现在需要做的就是检测鼠标拖动链中的最后一个点，其余的将跟随

连锁反应

var c=document.querySelector（“画布”），
ctx=c.getContext（“2d”），
//链-由*最后*点拖动
点数=[
{x:50，y:50}，
{x:100，y:60}，
{x:90，y:90}，
{x:120，y:110}，
{x:200，y:80}，
{x:250，y:130}
],
距离=50，
isDown=假；
//设置画布大小
调整大小（）；
window.onresize=调整大小；
函数resize（）{
c、 宽度=window.innerWidth；
c、 高度=窗内高度；
计算（）；
render（）
}
//手柄鼠标
c、 onmousedown=函数（e）{
var pos=getXY（e），
p=点[点.长度-1]；
isDown=（pos.x>p.x-7和pos.xp.y-7和pos.y0；i--）{
p1=点[i]；
p2=点[i-1]；
角度=数学atan2（p2.y-p1.y，p2.x-p1.x）；
p2.x=p1.x+距离*数学cos（角度）；
p2.y=p1.y+距离*数学sin（角度）；
}
}
//渲染线和句柄
函数render（）{
var lp，半径=7；
ctx.clearRect（0，0，c.宽度，c.高度）；
//渲染当前链
ctx.beginPath（）；
移动到（点[0].x，点[0].y）；
对于（var i=1；i

您将需要使用反向运动学，或者更具体地说，使用反向运动学

有许多方法或多或少比较复杂。下面是一个简单的方法，它允许您拖动端点，其余的将跟随。它并不完美，但可能会达到这个目的

（逆）运动链
主要功能如下。它假定定义了带有点的数组以及
距离
变量：

// calculate IK chain (from last to first)
function calc() {

    var angle, i, p1, p2;

    for(i = points.length - 1; i > 0; i--) {
        p1 = points[i];                                // current point
        p2 = points[i-1];                              // previous point
        angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);  // calc angle

        p2.x = p1.x + distance * Math.cos(angle);      // update previous point
        p2.y = p1.y + distance * Math.sin(angle);      // based on a fixed distance
    }
}

请注意，
distance
变量设置为固定长度，这是此处的关键

我们现在需要做的就是检测鼠标拖动链中的最后一个点，其余的将跟随

连锁反应

var c=document.querySelector（“画布”），
ctx=c.getContext（“2d”），
//链-由*最后*点拖动
点数=[
{x:50，y:50}，
{x:100，y:60}，
{x:90，y:90}，
{x:120，y:110}，
{x:200，y:80}，
{x:250，y:130}
],
距离=50，
isDown=假；
//设置画布大小
调整大小（）；
window.onresize=调整大小；
函数resize（）{
c、 宽度=window.innerWidth；
c、 高度=窗