移動端h5 使用canvas 實現連線答題功能

1. 先看效果圖

2. 需求描述

移動端，有個能連線答題的功能。從左側拖線移到右側。 1. 線需要在高度不固定的情況下，依舊生效，並且保持在中間的點。 2. 只要求 1對1 的情況。

3. 解決思路

1. 首先左右二側的選項我就不說了。重點是劃線部分。
2. 藉助於 canvas 實現 畫線功能，檢視示意圖。

1. 二個canvas標籤，一個是觸控中 劃線的展示，另一個是為了觸控結束之後，真正展示的劃線功能。

2. 難點是，touchend事件並不會知曉我拖到哪個標籤上了。這和 滑鼠事件 截然不同。

3. 思路：是不是可以手動算出來到哪的節點了？其實js提供了這個方法。document.elementFromPoint(event.pageX, event.pageY); 根據 x,y 得出當前的dom元素。

4. 程式碼展示

1. 說那麼多，我直接貼程式碼了。如果有不同的業務邏輯，可以自己修改調整。重點的劃線和拖動功能，都已經寫好了。

```js

```