上图为网易云盾的滑动拼图验证码。应有专门的图片库，裁切位置固定。我的想法是随机生成图片，随机生成位置，然后用画布剪出滑块和背景图像。具体步骤如下。

首先随机找一张图片，在画布上渲染，其中#canvas作为画布，#block作为剪切出来的小滑块。

canvas width=' 310 ' height=' 155 ' id=' canvas '/canvascanvascanvas width=' 310 ' height=' 155 ' id=' block '/canvasvar canvas=document . getelementbyid(' canvas ')var block=document . getelementbyid(' block ')var canvas _ CTX=canvas . getcontext(' 2d ')var block . getcontext(' 2d ')var img=document . createelement(' img ')img . onload=function(){ canvas _ CTXimg . src=' img . jpg '

让我们考虑一下如何剪出拼图的形状。拼图的形状很复杂。首先，我们画一个正方形，然后写上面的代码：

var x=150，y=40，w=42，r=10，PI=Math。PI函数draw(CTX){ CTX . Begin path()CTX . move to(x，y) ctx.lineTo(x w，y) ctx.lineTo(x w，Y w) CTX。CTX。clip()} draw(canvas _ CTX)draw(block _ CTX)x，y是正方形左上角的坐标，现在在后面生成时写随机数，w是正方形的边长，r是后面画缺口的圆的半径。首先我们用一个函数封装绘图过程，方便同时操作背景和滑块。Clip()方法用于剪切图片并生成一个正方形。

然后在正方形的顶部和右侧画圆：

函数draw(CTX){ CTX . begin path()CTX . move to(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 w/2) ctx.arc(x w r-2，y w/2，r，0，2*PI) //ctx

两个标注的位置将圆心向内偏移2px，实现缺口样式。然后是左边的空心部分。因为裁剪是裁剪路径中的部分，所以不可能直接画圆。我们打开一条新的路径，然后画一个圆来“覆盖”正方形中的一个缺口。这里，我们将使用globalCompositeOperation属性，顾名思义就是“xor”。代码上边缘：

函数draw (CTX).CTX.lineto (x，y)CTX . clip()CTX . begin path()CTX . arc(x，y w/2，r，1.5 * pi，0.5 * pi)//只需绘制背景图片CTX的便捷裁剪。global composite operation=' xor ' CTX。fill()}

现在我们有了一个基本的拼图形状，我们调整#block的大小，将剪切滑块放入#block:

img . onload=function(){ CTX . draw image(img，0，0，310，155) block_ctx.drawImage(img，0，0，310，155)var block width=w r * 2 var _ y=y-r * 2 2//滑块的实际y坐标var image data=block _ CTX。getimage data (x，_ y，块宽度，块宽度)block . width=block width block _ CTX . putimagedata(ImageData，0，_ y)}

现在我们需要在左边的画布上显示原始图片，并剪掉中间的滑块。这里画路径的过程是一样的。唯一的区别就是剪辑()可以改为填充()来达到效果。我们之前已经将绘制路径的过程打包为一个函数，所以我们可以做一个小小的改变：

-函数绘制(ctx) {函数绘制(ctx，operation)}.-CTX . clip(). CTX . FillStyle=' # fff ' CTX[operation]().} draw(canvas_ctx，' fill') draw(block_ctx，' clip ')

下一步是写风格，跳过：

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

最后加上随机图片和随机裁剪位置，基本就可以了。此外，还可以通过判断鼠标移动时Y轴的变化来判断是否是“人”在操作。当然，我不会教鱼游泳，只是做个简单的判断。

因为切片边缘没有边框和阴影，所以有些图片的滑块识别度不高，需要后期改进(其实我还没甩出来)。希望懂这一块的大神能帮我完善一下//

后面的代码比较乱，不会贴。在此检查完整的代码点，并在此演示地址点

摘要

以上是边肖推出的js画布，实现滑动拼图验证码的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！