javascript - js h5 canvas拉线选择题

Question

1.移动端js或者jq canvas 实现连线选择题功能
2.图片：
3.需求描述：
第一步

1.手指划过左边小手指图标（以下称小手），以小手为起点拉出一条直线
2.且跟随人手指移动而变化长短
3.当人指移到右图abcd任何一个图标且松开时，以abcd为终点汇出直线

第二步

如果已经连好直线的情况，
比如图中左图1连接了右图c的情况下，这时人指重新滑过图1则之前的连线（图1与图c）取消，
重新实现第一步
当我图1连图b时，汇出图1与图b的连线，并且取消先前图b与图orange的连线

通俗描述：就是个连线选择题，且连好线了还可以重新连线（更改答案），
一个图标只能连一根线，若有第二根线搭上，则取消前一根线搭上第二个线。

请教大神 此功能的详细思路 谢谢了
特别是第二步的详细思路，一个图标只能连一根线，在连好线的情况下怎么取消前一条线，重新拉出新线

Answer 1

第二步主要思路：一个答案只能对应一个来源。把答案对应的来源当做一个长度最大为1的数组[]。
当移动到该答案的时候，检查这个数组是否为空，若不为空，则清空，再绘制新的线。