为什么想着写这个功能呢，主要在于拼图验证码在前端这⾥会⽐较复杂并且深⼊。相⽐⽂字拼写，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 = Context("2d");let width = mainDom.width;let height = mainDom.height;let blockD 这⾥我绘制了两个canvas，因为⼀个是背景⼀个是滑块
核⼼在于
let mainDom = document.querySelector("#codeImg");let imgsrc = require("../assets/images/back.jpg");let bg = Context("2d");let img = docume 2、canvas绘制滑块部分
就是这个图，这个有⼀些知识点，不难，但是很复杂。
代码部分：
drawBlock(ctx, xy = { x: 254, y: 109, r: 9 }, type) { let x = xy.x, y = xy.y, r = xy.r, w = 40; let PI = Math.PI; //绘制 ctx.beginPath(); //veTo(x, y); //top ctx.arc(解释下：
参数是传⼊canvas对象
x，y轴数据
剪切还是填充的canvas函数(fill，clip)
绘制难点：(很重要，不然你没法理解它怎么绘制的)黄雨勋
绘制主要是需要理解这⾥的绘制是根据你设置⼀个起始点坐标，然后你绘制第⼆次的时候线就会连接到第⼆个点，依次连接最后回到原点就
谢霆锋的身高形成⼀个完整的图形。雪莉是谁为什么火
⽤的是arc参数，主要是看这个图
fill是⽤于填充绘制的部分，clip是裁剪出绘制的部分，利⽤这个就可以出现⼀个扣掉的图⽚和⼀个裁剪出来的图⽚。
完成之后就是我的那个函数了。⼤家可以直接拿去⽤。
3、让元素跟随⿏标点击之后滑动
这⾥其实原理⾮常简单，就是有⼀个注意点。
原理：
⿏标点击之后记录当前坐标，然后随着(mousemove)滚动的时候修改元素的left和top值就⾏了。
还有⼀点就是⿏标快速滑动会导致丢失滑动效果，这⾥需要⽤document，不能是元素级别的监听。
元素上⾯我只需要鉴定按下mousedown
代码：
//⿏标按下drag(e) { console.log("⿏标按下
发布评论