<img src="code.png" onclick="this.src ={$maccms.path_tpl}picture/captcha.png"
你也真敢想。网页验证码一般是在后台生成一个验证码在后台生成好图片返回给网页显示，用户输入的信息与后端保存的信息再进行验证。
如果后端的信息返回到前端是已文字的形式，就起不到安全的作用了。
你的这个功能可以这样设计，但作用不大。我来说说我的思路吧
首先后端返回一个数字类型的验证码，前端获取数字行的验证用js+css组织实现特效。你在上图的黑色部分设定一个挡扳的html元素（这个元素距离左边的三角形滑动块的距离就是后端返回的数字），左边滑块滑动多少距离达这个隐藏区块，获取这个数值，保存下来。
验证码本质是一种区分真实用户和僵尸程序的一种图灵测试。一些黑客会利用机器技术在某些业务应用中进行刷票（多次点击投票）、发广告、窃取客户密码等恶意操作，企业应用通过验证码确定操作者身份为真实用户，才允许进行下一步操作。具体来说，在注册、发帖、发评论、投票、提交密码前添加验证码，可以防止批量注册、发广告、刷票和破解密码等恶意操作。
滑块验证码是验证码的一种，是由图片验证码衍生后的产物。由于滑块验证码安全性更高，趣味性更强，所以多数网站或APP都选择了滑块验证码。比如说之前的b站。
那么滑块验证码的原理是什么呢？为什么拖拽到拼图处，就能判断出是人为操作还是机器人呢？
其实滑块验证码，不仅仅只是完成拼图，前端用户看不见的是——验证码后台针对用户产生的行为轨迹数据进行机器学习建模，结合访问频率、地理位置、历史记录等多个维度信息，快速、准确的返回人机判定结果，故而机器识别+模拟不易通过。
滑块验证需要前后端配合，本文就讲一下前端如何用canvas实现。
每次的拼图照片都是随机产生的，由后端提供
拼图缺口的x,y坐标用random方法随机产生
画完拼图，接下来要画滑块。这里需要用到第二个canvas，利用绝对定位使两个canva位置重合
保证滑块和拼图缺口的图案相同
增加操作条的dom到页面上，给按钮绑定onMouseDown事件
这就实现了简单的前端效果，实际操作中前端需要与后端通信，由后端进行验证返回结果。但其实滑块验证也不够安全，很容易模拟绕过，所以现在的b站也换成了中文验证码。
