js+canvas实现滑动拼图验证码功能

更新时间：2018年03月26日 10:49:01 作者：huanglei-

这篇文章主要介绍了js+canvas实现滑动拼图验证码功能，本文结合实例代码分步骤给大家介绍的非常详细,需要的朋友可以参考下

上图为网易云盾的滑动拼图验证码，其应该有一个专门的图片库，裁剪的位置是固定的。我的想法是，随机生成图片，随机生成位置，再用canvas裁剪出滑块和背景图。下面介绍具体步骤。

首先随便找一张图片渲染到canvas上，这里#canvas作为画布，#block作为裁剪出来的小滑块。

<canvas width="310" height="155" id="canvas"></canvas>
<canvas width="310" height="155" id="block"></canvas>
var canvas = document.getElementById('canvas')
 var block = document.getElementById('block')
 var canvas_ctx = canvas.getContext('2d')
 var block_ctx = block.getContext('2d')
 var img = document.createElement('img')
 img.onload = function() {
  canvas_ctx.drawImage(img, 0, 0, 310, 155)
  block_ctx.drawImage(img, 0, 0, 310, 155)
 };
 img.src = 'img.jpg'

下面考虑如何裁剪出拼图的形状，拼图形状比较复杂，首先我们画一个正方形，接着上边的代码写：

var x = 150, y = 40, w = 42, r = 10, PI = Math.PI 
 function draw(ctx) {
  ctx.beginPath()
  ctx.moveTo(x, y)
  ctx.lineTo(x + w, y)
  ctx.lineTo(x + w, y + w)
  ctx.lineTo(x, y + w)
  ctx.clip()
 }
 draw(canvas_ctx)
 draw(block_ctx)

x,y为正方形左上角的坐标，现在先随便写后边生成的时候用随机数，w为正方形的边长，r为后边画缺口的圆的半径。我们先把绘图过程用函数封装起来，方便后面同时操作背景和滑块。用clip()方法裁剪图片后生成一个正方形。

接下来画正方形上边和右边的圆形：

function draw(ctx) {
  ctx.beginPath()
  ctx.moveTo(x,y)
+  ctx.lineTo(x+w/2,y)
+  ctx.arc(x+w/2,y-r+2, r,0,2*PI) //
+  ctx.lineTo(x+w/2,y)
  ctx.lineTo(x+w,y)
+  ctx.lineTo(x+w,y+w/2)
+  ctx.arc(x+w+r-2,y+w/2,r,0,2*PI) //
+  ctx.lineTo(x+w,y+w/2)
  ctx.lineTo(x+w,y+w)
  ctx.lineTo(x,y+w)
  ctx.lineTo(x,y)
  ctx.clip()
 }

两处注释的位置将圆心往内偏移了2px，实现缺口的样式。然后是左边空心的部分，由于clip是裁剪路径内的部分，因此直接像上面画圆是不行的，我们开启一条新的路径，然后画圆将这个正方形“遮盖”出一个缺口，这里会用到 globalCompositeOperation 属性，'xor'顾名思义。代码接上边：

function draw(ctx) {
  ctx.beginPath()
  ...
  ctx.lineTo(x,y)
  ctx.clip()
+  ctx.beginPath()
+  ctx.arc(x,y+w/2, r,1.5*PI,0.5*PI) // 只需要画正方形内的半圆就行，方便背景图片的裁剪
+  ctx.globalCompositeOperation = "xor"
+  ctx.fill()
}

现在一个基本的拼图形状有了，我们调整#block的大小，并将裁剪出来的滑块放入#block中：

img.onload = function() {
  ctx.drawImage(img, 0, 0, 310, 155)
  block_ctx.drawImage(img, 0, 0, 310, 155)
+  var blockWidth = w + r * 2
+  var _y = y - r * 2 + 2 // 滑块实际的y坐标
+  var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
+  block.width = blockWidth
+  block_ctx.putImageData(ImageData, 0, _y)
 }

现在我们需要把左边画布展示原来的图片，并且抠掉中间滑块的部分，这里画路径的过程都是一样的，唯一不同只是clip()那里改成fill()即可实现效果，我们前面已经把画路径的过程封装成函数了，稍作改动即可：

- function draw(ctx) {
+ function draw(ctx, operation) {
  ...
- ctx.clip()
+ ctx.fillStyle = '#fff'
+ ctx[operation]()
  ...
}
+ draw(canvas_ctx, 'fill')
+ draw(block_ctx, 'clip')

接下来就是写样式了，略过：

然后就是写拖动事件，我们可以在鼠标按下时记录鼠标位置，然后在拖动时给滑块设置left值。最后在松开鼠标时，判断滑块此时的left值和最开始裁剪滑块时的x值，如果在一定范围内就算验证通过，否则验证失败。

最后再加上随机图片和随机剪切位置，基本就ok了。另外可以判断下鼠标移动时y轴的变化，以判断是否是“人”在操作，当然web安全这块神魔乱舞的，我就不班门弄斧了，只是做个简单判断就行。

由于没有给切片边缘加上边框或者阴影，导致某些图片的滑块可识别度不高，需要后边完善下（其实是我还没折腾出来- -），希望懂这块的大神帮我完善下//

后边代码比较杂乱，就不贴上来了，查看完整代码点这里演示地址点这里

总结

以上所述是小编给大家介绍的js+canvas实现滑动拼图验证码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

js实现可旋转的立方体模型
这里给大家分享的是通过js脚本来控制页面中的正方体转动特效，用户可以点击按钮向右转动，也可以向下转动，结合自己的需求控制即可。效果非常棒，这里推荐给大家
2016-10-10
JS日期转化指定格式及获取月/周日期区间的方法
本文详细介绍了JavaScript中Date类型的处理方法,包括日期的格式转换和获取特定月份或周的日期区间,本文介绍JS日期转化指定格式及获取月/周日期区间的方法,感兴趣的朋友跟随小编一起看看吧
2024-09-09
Web制作验证码功能实例代码
web开发中，经常会使用验证码功能，例如登录、注册，或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码，感兴趣的朋友一起看看吧
2017-06-06
微信小程序之GET请求的实例详解
这篇文章主要介绍了微信小程序之GET请求的实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握该如何使用get请求,需要的朋友可以参考下
2017-09-09
javascript之函数进阶详解
这篇文章主要为大家介绍了javascript函数进阶，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>
2021-12-12
javascript实现简易的计算器
这篇文章主要为大家详细介绍了javascript实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
Javascript 运动中Offset的bug解决方案
这篇文章主要介绍了Javascript 运动中Offset的bug解决方案,需要的朋友可以参考下
2014-12-12
JS算法教程之字符串去重与字符串反转
这篇文章主要给大家介绍了关于JS算法教程之字符串去重与字符串反转的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
js给对象动态添加、设置、删除属性名与属性值实例代码
由于项目需要常常会遇到为某一个对象动态添加属性的情况,下面这篇文章主要给大家介绍了关于js给对象动态添加、设置、删除属性名与属性值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
webpack4.x打包过程详解
这篇文章主要介绍了webpack4.x打包过程详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07

js+canvas实现滑动拼图验证码功能

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具