使用html5+canvas+Jquery實現的純程式碼連線題Demo

標籤：html5   canvas   jquery   連線題   

前端一直是令眾等小牛們膽怯的領域，但一旦涉足，技術自然也是蹭蹭蹭的往上漲，荷包也就自然的bingo了。

然而在這萬千世界加之資料滿街撒的時代，卻仍然在我們開發過程中總有那麼一丟丟的技術點難以找到合適自身的demo，故而引發了眾生牛牛們的不滿和抱怨，於是乎苦逼的從後端到前端的探險曆程，走上了一條漫漫人生路。

隨著我們業務應用情境的廣泛化，衍生了眾多華麗的前端藝術及產品，接下來則分享一份使用html5+canvas實現的草稿版連線題demo，希望有助於奮鬥在一線前端的開發人員們，也多多提供一些改良意見及多一份包涵。

首先功能點涉及重設、回退、取值（getPair）、答案（savePair）等四個按鈕操作。

1、重設按鈕，顧名思義為清除所以操作動作，清空畫板的功能；

2、回退按鈕，即返回上一步的意思，直至清空所有作答為止；

3、取值（getPair），案例如下：

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/88/7D/wKioL1f59f6TRBJ1AACeUXFgjA0000.jpg-wh_500x0-wm_3-wmp_4-s_539831629.jpg" title="line1.jpg" alt="wKioL1f59f6TRBJ1AACeUXFgjA0000.jpg-wh_50" />

返回屬性格式及內建屬性key-value可自訂：

var idAttr = [];idStr = "key : value";idAttr.push(idStr);alert(idAttr);

4、答案（savePair），案例如下：

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/88/80/wKiom1f594XjhK4dAAFOy19CnWw656.jpg-wh_500x0-wm_3-wmp_4-s_4271541341.jpg" title="line2.jpg" alt="wKiom1f594XjhK4dAAFOy19CnWw656.jpg-wh_50" />

答案值可自訂，展示正確答案連線格式如綠色框所標註。

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M00/88/81/wKiom1f5-cei9T-OAAEi4xY8lIU365.jpg-wh_500x0-wm_3-wmp_4-s_2351509564.jpg" title="line3.jpg" alt="wKiom1f5-cei9T-OAAEi4xY8lIU365.jpg-wh_50" />

附件案例設計橫版及豎版demo，可替換圖片等其他資源，具體樣式排版請自行下載修改。

源碼有看不懂的地方煩請留言諮詢，將第一時間回覆給大家。

本文出自 “華麗Dē‖Java Question” 部落格，請務必保留此出處http://teny32.blog.51cto.com/8027509/1859843

使用html5+canvas+Jquery實現的純程式碼連線題Demo