JavaScript---实现滑动拼图验证效果完整代码

 

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

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

1 2 3 4 5 6 7 8 9 10 11 12

<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'