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

所属分类:其他-杂项

使用html5+canvas+Jquery实现的纯代码连线题 ie兼容9

分享一份使用html5+canvas实现的草稿版连线题demo,希望有助于奋斗在一线前端的开发人员们,也多多提供一些改良意见及多一份包涵。

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

1、重置按钮,顾名思义为清除所以操作动作,清空画板的功能;

2、回退按钮,即返回上一步的意思,直至清空所有作答为止;

3、取值(getPair),案例截图如下:

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

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


相关插件-杂项

淘宝商品动态生成SKU表格实例

淘宝商户端发布商品时动态生成SKU表格的实例
  杂项
 2239  21

在线PDF预览插件PDFObject.js

PDFObject.js,是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。
  杂项
 115493  203

原生态图片合成

多张图片合成一张图片
  杂项
 4322  10

jQuery在线问答

jQuery答题卡测试卡文件树可重复选择,不可重复选择答案
  杂项
 4387  44

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    hzz1995 0
    2018/4/18 17:37:43
    这个效果已经非常好了,但是如果作者或者更多的牛人将多对一,一对多的需求设置成代码的方式动态设置感觉就是一个更加完美的插件了。 回复
    Always online 0
    2018/1/26 11:22:07

    请问有人解决多对多的问题了吗

        love凝づ眸╃0
        2018/4/3 17:17:50
        同样的问题,还有就是能把这些换成tree吗
    回复
    骑着蜗牛的猪 0
    2018/1/4 10:40:12

    怎么一对多?怎么删除划线???

    回复
    释然 0
    2017/12/11 19:10:17
    可以针对某个元素进行删除直线吗? 回复
    で ね☆花舞う葬.・°? 0
    2017/11/2 14:37:21

    如何实现多对多的连线

    回复
    冰水晶 0
    2017/9/13 10:45:47

    savePair的值如何替换,修改

    回复
    ¤紫??¤ 0
    2017/6/6 14:19:26

    如何实现一对多的连线

        ☆给本宫站住☆0
        2017/6/15 10:52:00

        我也想知道这个问题

    回复
    吃灰少年 0
    2017/3/31 10:20:25

    谢谢作者,这个对我很有用

    回复
取消回复