缘由：之前看哔哩哔哩官网登录的时候有一个拼图验证码，很好奇怎么去实现。然后就想着自己弄一个。先给大家看我的最终效果。后面再一点点拆解代码。

为什么想着写这个功能呢，主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写，12306的图片验证码都没有拼图验证码对前端的要求来的复杂，和难。

我总结下知识点：

1、弹窗功能

2、弹窗基于元素定位

3、元素拖动

4、canvas绘图

5、基础逻辑

一、弹窗和弹窗组件

抱歉，这里我偷懒了直接用了elementUI的el-popover组件，所以小伙伴不懂的直接看elementUI官网的说明。

我个人也研究和编写了这块的组件功能（基于popper.js）

二、编写基础结构

这块属于html的基础内容，也就标题党了

三、canvas绘制图片

1、canvas绘制外部img图片

代码：

let mainDom = document.querySelector("#codeImg");let bg = mainDom.getContext("2d");let width = mainDom.width;let height = mainDom.height;let blockDom = document.querySelector("#sliderBlock");let block = blockDom.getContext("2d");//重新赋值，让canvas进行重新绘制blockDom.height = height;mainDom.height = height;let imgsrc = require("../assets/images/back.jpg");let img = document.createElement("img");img.style.objectFit = "scale-down";img.src = imgsrc;img.onload = function() { bg.drawImage(img, 0, 0, width, height); block.drawImage(img, 0, 0, width, height);};

这里我绘制了两个canvas，因为一个是背景一个是滑块

核心在于

let mainDom = document.querySelector("#codeImg");let imgsrc = require("../assets/images/back.jpg");let bg = mainDom.getContext("2d");let img = document.createElement("img");img.onload = function() { bg.drawImage(img, 0, 0, width, height);};

2、canvas绘制滑块部分

就是这个图，这个有一些知识点，不难，但是很复杂。

具体请看：https://positeOperation = "xor"; } }};</script><style>.slidingPictures { padding: 0; width: 300px; border-radius: 2px;}</style><style scoped lang="scss">#login { display: flex; flex-flow: row; justify-content: flex-end; align-items: center; width: 100%; height: 100%; background-image: url("../assets/images/back.jpg"); background-size: 100% 100%; .loginFrom { width: 300px; margin-top: -10vw; margin-right: 10vw; .login-item { display: flex; justify-content: center; align-items: center; } .login-title { color: #ffffff; font-size: 16px; margin-bottom: 10px; } .login-bottom { margin-top: 15px; } .login-bottom:hover { background: rgba(28, 136, 188, 0.5); } .login-bottom:active { background: rgba(228, 199, 200, 0.5); } /deep/.login-inputorbuttom { height: 40px; width: 300px; background: rgba(57, 108, 158, 0.5); border-radius: 20px; border: #396c9e 1px solid; font-size: 14px; color: #ffffff; .el-input--small, .el-input__inner { line-height: 43px; border: none; color: #ffffff; font-size: 14px; height: 40px; border-radius: 20px; background: transparent; text-align: center; } .el-input__icon { line-height: 40px; font-size: 16px; } } }}.sliding-pictures { width: 100%; .vimg { width: 100%; height: 170px; #codeImg, #sliderBlock { padding: 7px 7px 0 7px; width: inherit; height: inherit; } #codeImg { //display: none; } #sliderBlock { position: absolute; z-index: 4000; } } .slider { width: 100%; height: 65px; border-bottom: #c7c9d0 1px solid; display: flex; align-items: center; justify-content: flex-start; .track { margin-left: 7px; width: 286px; height: 38px; background: rgba(28, 136, 188, 0.5); border-radius: 25px; font-size: 14px; line-height: 38px; padding-right: 15px; padding-left: 70px; } .pintuTrue { background: #67c23a; color: #ffffff; } .button { position: absolute; width: 50px; height: 50px; line-height: 48px; background: #ffffff; box-shadow: #b9bdc8 0 0 3px; border-radius: 50%; left: 7px; text-align: center; font-size: 28px; color: #3e5d8b; &:hover { color: #2181bd; } } } .operation { width: 100%; height: 40px; > span { color: #9fa3ac; display: inline-block; width: 40px; font-size: 25px; line-height: 40px; text-align: center; &:hover { background: #e2e8f5; } } }}</style>

总结

以上所述是小编给大家介绍的Vue实现滑动拼图验证码功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小会及时回复大家的！