canvas滚动 vue_Vue实现滑动拼图验证码

原标题：Vue实现滑动拼图验证码

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

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

我总结下知识点：

1、弹窗功能

2、弹窗基于元素定位

3、元素拖动

4、canvas绘图

5、基础逻辑

弹窗和弹窗组件

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

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

编写基础结构

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

Canvas绘制图片

1、canvas绘制外部img图片

代码：

letmainDom = document.querySelector( "#codeImg");

letbg = mainDom.getContext( "2d");

letwidth = mainDom.width;

letheight = mainDom.height;

letblockDom = document.querySelector( "#sliderBlock");

letblock = blockDom.getContext( "2d");

//重新赋值，让canvas进行重新绘制

blockDom.height = height;

mainDom.height = height;

letimgsrc = require( "../assets/images/back.jpg");

letimg = document.( "img");

img.style.objectFit = "scale-down";

img.src = imgsrc;

img. = function(){

bg.drawImage(img, 0, 0, width, height);

block.drawImage(img, 0, 0, width, height);

};

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

核心在于

letmainDom = document.querySelector( "#codeImg");

letimgsrc = require( "../assets/images/back.jpg");

letbg = mainDom.getContext( "2d");

letimg = document.( "img");

img. = function(){

bg.drawImage(img, 0, 0, width, height);

};

2、canvas绘制滑块部分

就是这个图，这个有一些知识点，不难，但是很复杂。具体请看：https://www.w3school.com.cn/tags/html_ref_canvas.asp

代码部分：

drawBlock(ctx, xy = { x: 254, y: 109, r: 9}, type) {

letx = xy.x,

y = xy.y,

r = xy.r,

w = 40;

letPI = Math.PI;

//绘制

ctx.beginPath;

//left

ctx.moveTo(x, y);

//top

ctx.arc(x + (w + 5) / 2, y, r, -PI, 0, true);

ctx.lineTo(x + w + 5, y);

//right

ctx.arc(x + w + 5, y + w / 2, r, 1.5* PI, 0.5* PI, false);

ctx.lineTo(x + w + 5, y + w);

//bottom

ctx.arc(x + (w + 5) / 2, y + w, r, 0, PI, false);

ctx.lineTo(x, y + w);

ctx.arc(x, y + w / 2, r, 0.5* PI, 1.5* PI, true);

ctx.lineTo(x, y);

//修饰，没有会看不出效果

ctx.lineWidth = 1;

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";

ctx.stroke;

ctx[type];

ctx.globalCompositeOperation = "xor";

}

解释下：参数是传入canvas对象

x，y轴

数据剪切还是填充的canvas函数(fill，clip)

绘制难点：(很重要，不然你没法理解它怎么绘制的)

绘制主要是需要理解这里的绘制是根据你设置一个起始点坐标，然后你绘制第二次的时候线就会连接到第二个点，依次连接最后回到原点就形成一个完整的图形。

圆形的绘制：来自：https://www.w3school.com.cn/tags/canvas_arc.asp

用的是arc参数，主要是看这个图

fill是用于填充绘制的部分，clip是裁剪出绘制的部分，利用这个就可以出现一个扣掉的图片和一个裁剪出来的图片。

完成之后就是我的那个函数了。大家可以直接拿去用。

让元素跟随鼠标点击之后滑动

这里其实原理非常简单，就是有一个注意点。

原理：鼠标点击之后记录当前坐标，然后随着(mousemove)滚动的时候修改元素的left和top值就行了。

还有一点就是鼠标快速滑动会导致丢失滑动效果，这里需要用document，不能是元素级别的监听。

元素上面我只需要鉴定按下mousedown

代码：

//鼠标按下

drag(e) {

console.log( "鼠标按下", e);

letdom = e.target; //dom元素

letslider = document.querySelector( "#sliderBlock"); //滑块dom

constdownCoordinate = { x: e.x, y: e.y };

//正确的滑块数据

letcheckx = Number( this.slider.mx) - Number( this.slider.bx);

//x轴数据

letx = 0;

constmove = moveEV=>{

x = moveEV.x - downCoordinate.x;

//y = moveEV.y - downCoordinate.y;

if(x >= 251|| x <= 0) returnfalse;

dom.style.left = x + "px";

//dom.style.top = y + "px";

slider.style.left = x + "px";

};

constup = =>{

document.removeEventListener( "mousemove", move);

document.removeEventListener( "mouseup", up);

dom.style.left = "";

console.log(x, checkx);

letmax = checkx - 5;

letmin = checkx - 10;

//允许正负误差1

if((max >= x && x >= min) || x === checkx) {

console.log( "滑动解锁成功");

this.puzzle = true;

this.tips = "验证成功";

setTimeout( =>{

this.visible = false;

}, 500);

} else{

console.log( "拼图位置不正确");

this.tips = "验证失败，请重试";

this.puzzle = false;

this.canvasInit;

}

};

document.addEventListener( "mousemove", move);

document.addEventListener( "mouseup", up);

}

总结

核心点比较多，写过之后发现不难，关键在于去写

个人该页面git地址：https://github.com/ht-sauce/dream

该页面处于项目的

路由访问为：http://localhost:8080/consumer

致谢

我的代码参考来自：

https://www.jb51.net/article/137129.htm

作者的git地址：https://github.com/yeild/jigsaw返回搜狐，查看更多

责任编辑：