溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用html5+canvas+Jquery實現(xiàn)的純代碼連線題

發(fā)布時間：2020-06-23 06:57:12 來源：網(wǎng)絡(luò) 閱讀：5331 作者：a7272706 欄目：移動開發(fā)

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

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

隨著我們業(yè)務(wù)應用場景的廣泛化，衍生了眾多華麗的前端藝術(shù)及產(chǎn)品，接下來則分享一份使用html5+canvas實現(xiàn)的草稿版連線題demo，希望有助于奮斗在一線前端的開發(fā)人員們，也多多提供一些改良意見及多一份包涵。

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

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

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

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

使用html5+canvas+Jquery實現(xiàn)的純代碼連線題

返回屬性格式及內(nèi)置屬性key-value可自定義：

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


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


使用html5+canvas+Jquery實現(xiàn)的純代碼連線題

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

使用html5+canvas+Jquery實現(xiàn)的純代碼連線題


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

找不到附件位置的，也可點擊此處鏈接下載：http://down.51cto.com/data/2248885


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


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手