使用html5+canvas+Jquery实现的纯代码连线题Demo

前端一直是令众等小牛们胆怯的领域，但一旦涉足，技术天然也是蹭蹭蹭的往上涨，荷包也就天然的bingo了。

然而在这万千世界加之资料满街撒的时代，却仍然在咱们开发过程当中总有那么一丢丢的技术点难以找到合适自身的demo，故而引起了众生×××们的不满和抱怨，因而乎苦逼的从后端到前端的探险历程，走上了一条漫漫人生路。

随着咱们业务应用场景的普遍化，衍生了众多华丽的前端艺术及产品，接下来则分享一份使用html5+canvas实现的草稿版连线题demo，但愿有助于奋斗在一线前端的开发人员们，也多多提供一些改良意见及多一份包涵。

首先功能点涉及重置、回退、取值（getPair）、答案（savePair）等四个按钮操做。

一、重置按钮，顾名思义为清除因此操做动做，清空画板的功能；

二、回退按钮，即返回上一步的意思，直至清空全部做答为止；

三、取值（getPair），案例截图以下：

返回属性格式及内置属性key-value可自定义：

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

四、答案（savePair），案例截图以下：

答案值可自定义，展现正确答案连线格式如绿色框所标注。

正文下方附件案例设计横版及竖版demo，可替换图片等其余资源，具体样式排版请自行下载修改。

找不到附件位置的，也可点击此处连接下载：http://down.51cto.com/data/2248885

源码有看不懂的地方烦请留言咨询，将第一时间答复给你们。