按住左边滑块成上方拼图 _云知道

为什么想着写这个功能呢，主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写，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 = https://atx106.com/require(/”../assets/images/back.jpg/”);
let img = document.createElement(\”img\”);
img.style.objectFit = \”scale-down\”;
img.src = https://atx106.com/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 = https://atx106.com/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绘制滑块部分
就是这个图，这个有一些知识点，不难，但是很复杂。
代码部分：
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();
//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）
绘制难点：（很重要，不然你没法理解它怎么绘制的）
绘制主要是需要理解这里的绘制是根据你设置一个起始点坐标，然后你绘制第二次的时候线就会连接到第二个点，依次连接最后回到原点就形成一个完整的图形。
用的是arc参数，主要是看这个图
fill是用于填充绘制的部分，clip是裁剪出绘制的部分，利用这个就可以出现一个扣掉的图片和一个裁剪出来的图片。
完成之后就是我的那个函数了。大家可以直接拿去用。

按住左边滑块成上方拼图

推荐阅读

rav4和昂科威s对比有什么区别？

背包带太长了怎么处理背包带太长了应该怎么处理

Windows 7 将没有 Ultimate Extras 礼包

红白相间斜杠的交通标志

如何正确安装电脑设备驱动程序电脑安装设备驱动程序

蓝孔雀会不会飞，为什么蓝孔雀

质量差的铁锅会有什么后果

章鱼TV直播没有画面怎么办？章鱼TV摄像头无法启动解决方法

白掌黄叶是怎么回事

公交车小程序有用吗?公交车小程序是否有用？

保险学，2022年人大研究生保险学补录吗

狗狗皮肤病好了会复发吗？做好这几点防复发

怎么判断etc设备是否有电

微信如何设置地区为空

小孩户口迁出还可以迁回来吗

革怎么读

按住左边滑块 成上方拼图

推荐阅读

按住左边滑块成上方拼图