日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

按住左邊滑塊 成上方拼圖

云知道成上方拼圖


按住左邊滑塊 成上方拼圖


為什么想著寫這個功能呢，主要在于拼圖驗證碼在前端這里會比較復(fù)雜并且深入 。相比文字拼寫，12306的圖片驗證碼都沒有拼圖驗證碼對前端的要求來的復(fù)雜，和難 。
【按住左邊滑塊 成上方拼圖】我總結(jié)下知識點：
1、彈窗功能
2、彈窗基于元素定位
3、元素拖動
4、canvas繪圖
5、基礎(chǔ)邏輯
一、彈窗和彈窗組件
抱歉，這里我偷懶了直接用了elementUI的el-popover組件，所以小伙伴不懂的直接看elementUI官網(wǎng)的說明 。
我個人也研究和編寫了這塊的組件功能（基于popper.js）
二、編寫基礎(chǔ)結(jié)構(gòu)
這塊屬于html的基礎(chǔ)內(nèi)容，也就標題黨了
三、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繪制滑塊部分
就是這個圖，這個有一些知識點，不難，但是很復(fù)雜 。
代碼部分：
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\”;
}
解釋下：
參數(shù)是傳入canvas對象
x，y軸數(shù)據(jù)
剪切還是填充的canvas函數(shù)（fill，clip）
繪制難點：（很重要，不然你沒法理解它怎么繪制的）
繪制主要是需要理解這里的繪制是根據(jù)你設(shè)置一個起始點坐標，然后你繪制第二次的時候線就會連接到第二個點，依次連接最后回到原點就形成一個完整的圖形 。
用的是arc參數(shù)，主要是看這個圖
fill是用于填充繪制的部分，clip是裁剪出繪制的部分，利用這個就可以出現(xiàn)一個扣掉的圖片和一個裁剪出來的圖片 。
完成之后就是我的那個函數(shù)了 。大家可以直接拿去用 。

推薦閱讀