JavaScript實現拖動滑塊拼圖驗證功能（html5、canvas）
引言：
滑塊拖動驗證現在很多地方都用到，周末就琢磨著寫瞭一個，放上來，看看有沒有人用得上！ 效果：
實現思路：
用一張畫佈繪制源圖，再繪制一個填充的方形，這樣就可以達到缺失的效果（方形的坐標是隨機的）；
再用一個畫佈繪制拖動塊，同時用drawImage截取和上一步中方形區域一樣坐標、大小的原圖，就作為驗證圖瞭，把驗證圖放在最左邊；
在拖動塊處，按下鼠標然後拖動，拖動塊和驗證圖會跟隨鼠標移動，達到一定范圍後放開鼠標，會進行驗證；
驗證通過則提示驗證成功，驗證不通過則拖動塊和驗證圖會返回到最左邊。
3個構造函數 圖片構造函數
//圖片對象ImageDraw構造函數
function ImageDraw(o,obj){
this.id='',
this.image=0,//圖片對象（必填）
this.sx=0,//圖片切片開始x位置（顯示整個圖片的時候不需要填）
this.sy=0,//圖片切片開始y位置（顯示整個圖片的時候不需要填）
this.sWidth=0, //圖片切片開始寬度（顯示整個圖片的時候不需要填）
this.sHeight=0,//圖片切片開始高度（顯示整個圖片的時候不需要填）
this.dx=0, //圖片目標x位置（必填）
this.dy=0, //圖片目標y位置（必填）
this.dWidth=0,//圖片目標顯示寬度（寬度不縮放時不必填）
this.dHeight=0//圖片目標高度高度（高度不縮放時不必填）
this.init(o,obj);
}
ImageDraw.prototype.init=function(o,obj){
for(var key in o){
this[key]=o[key];
}
return this;
}
ImageDraw.prototype.render=function(context){
draw(context,this);
function draw(context,obj) {
var ctx=context;
ctx.save();
if(!obj.image || getType(obj.dx)=='undefined' || getType(obj.dy)=='undefined'){
throw new Error("繪制圖片缺失參數");
return;
}
ctx.translate(obj.dx,obj.dy);
if(getType(obj.sx)!='undefined' && getType(obj.sy)!='undefined' && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){
//裁剪圖片，顯示時候有縮放
ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight);
}else if(obj.dWidth && obj.dHeight){
ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight);//原始圖片，顯示時候有縮放
}else{
ctx.drawImage(obj.image,0, 0);//原始圖片，顯示時候無縮放
}
ctx.restore();
}
}
ImageDraw.prototype.isPoint=function(pos){
//鼠標位置的x、y要分別大於dx、dy 且x、y要分別小於 dx+dWidth、dy+dHeight
if(pos.x>this.dx && pos.y>this.dy && pos.x<this.dx+this.dWidth && pos.y<this.dy+this.dHeight ){//表示處於當前圖片對象范圍內
return true;
}
return false;
}
方形構造函數
function Rect(o){
this.x=0,//x坐標
this.y=0,//y坐標
this.width=100,//寬
this.height=40,//高
this.thin=true,//線段薄一點
this.init(o);
}
Rect.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
Rect.prototype.render=function(context){
this.ctx=context;
innerRender(this);
function innerRender(obj){
var ctx=obj.ctx;
ctx.save()
ctx.beginPath();
ctx.translate(obj.x,obj.y);
if(obj.lineWidth){
ctx.lineWidth=obj.lineWidth;
}
if(obj.thin){
ctx.translate(0.5,0.5);
}
ctx.rect(0,0,obj.width,obj.height);
if(obj.fill){//是否填充
obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
ctx.fill();
}
if(obj.stroke){//是否描邊
obj.strokeStyle?(ctx.strokeStyle=obj.strokeStyle):null;
ctx.stroke();
}
ctx.restore();
}
return this;
}
文本構造函數
function Text(o){
this.x=0,//x坐標
this.y=0,//y坐標
this.text='',//內容
this.font=null;//字體
this.textAlign=null;//對齊方式
this.init(o);
}
Text.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
Text.prototype.render=function(context){
this.ctx=context;
innerRender(this);
function innerRender(obj){
var ctx=obj.ctx;
ctx.save()
ctx.beginPath();
ctx.translate(obj.x,obj.y);
if(obj.font){
ctx.font=obj.font;
}
if(obj.textAlign){
ctx.textAlign=obj.textAlign;
}
if(obj.fill){//是否填充
obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
ctx.fillText(obj.text,0,0);
}
ctx.restore();
}
return this;
}
繪制源圖和缺失塊
var img = new ImageDraw({image:this.imgObj[0],dx:0, dy:0 ,dWidth:640,dHeight:360},this);
this.renderArr.push(img);
var x=_.getRandom(100,580);//x從100-580之間取
var y=_.getRandom(0,300);//y從0-300之間取
this.validPos={x:x,y:y};
//缺失塊繪制
var rect = new Rect({
x:x,
y:y,
width:60,
height:60,
fill:true,
fillStyle:'gray'
})
this.renderArr.push(rect);
//繪制驗證塊長條
var rect = new Rect({
x:0,
y:360,
width:640,
height:40,
fill:true,
fillStyle:'#E8E8E8'
})
this.renderArr.push(rect);
//繪制文字
var text = new Text({
x:300,
y:390,
text:'拖動滑塊驗證',
font:'18px serif',
textAlign:'center',
fill:true,
//fillStyle:'white'
});
this.renderArr.push(text);
此時頁面效果如下
繪制驗證圖和拖動塊
註意：驗證圖的繪制坐標與上一步繪制缺失塊的坐標是一樣的。
var pos = this.validPos;//上一步繪制缺失塊的坐標，驗證圖需根據這個坐標來截取
var img = new ImageDraw({image:this.imgObj[0],sx:pos.x,sy:pos.y,sWidth:60,sHeight:60,dx:0, dy:pos.y,dWidth:60,dHeight:60},this);
this.renderArr2.push(img);
var img1 = new ImageDraw({image:this.imgObj[1],dx:0, dy:360 ,dWidth:40,dHeight:40},this);
this.renderArr2.push(img1);
效果圖：
畫佈2添加事件
//給canvas畫佈添加點擊事件
canvas2.addEventListener('mousedown',this.mouseDown.bind(this));
canvas2.addEventListener('mouseup',this.mouseUp.bind(this));
canvas2.addEventListener('mousemove',this.mouseMove.bind(this));
鼠標按下事件
- 記錄鼠標按下時的x坐標，保持鼠標移動不飄。
- 改變移動標記為true，防止沒有拖動滑塊而產生移動的效果。
Slider.prototype.mouseDown=function(e){
var pos = _.getOffset(e);//獲取鼠標位置
if(!this.block) return ;
if(this.block.isPoint(pos)){//按下的位置是滑塊的位置
this.move=true;//表示可以移動
this.downX=pos.x;//記錄鼠標按下的位置，保持移動
}
}
鼠標移動事件
- 驗證圖和滑塊移動時需減去鼠標點擊的初始X坐標。
- 當超過一定范圍則不能再移動，防止移出畫佈范圍。
Slider.prototype.mouseMove=function(e){
if(!this.move) return ;//移動標記為false則直接返回
var pos = _.getOffset(e);
pos.x -= this.downX;//要減去鼠標初始點擊的位置
if(pos.x>580){
return ;
}
this.update(pos);//移動
}
//更新
Slider.prototype.update=function(pos){
//更改滑塊和驗證圖的坐標
_.each(this.renderArr2,function(item){
if(item){
item.dx=pos.x;
}
});
//繪制
this.render();
}
鼠標放開事件
- 鼠標移動move標記為false；
- 未達到驗證范圍而放開鼠標，滑塊和驗證圖會回到最左邊；
- 當驗證圖的移動達到一定范圍，則表示驗證通過；
驗證通過後，提示驗證通過，相關內容要做出改變，比如缺失塊的清除、提示文字內容的改變等；
Slider.prototype.mouseUp=function(e){
this.move=false;
var pos = _.getOffset(e);
pos.x -= this.downX;
var validPos = this.validPos;//驗證快的坐標
if(Math.abs(pos.x-validPos.x )<=10){//驗證通過（x位置的差值多少范圍內即可）
console.log('通過')
this.suc();
}else{//驗證不通過
this.update({x:0});
}
this.render();
}
Slider.prototype.suc=function(){
this.renderArr.splice(2,1);//清楚缺失塊
this.block=null;
//滑塊和驗證圖的清除
this.renderArr2.length=0;
//長條顏色的改變
this.renderArr[1].fillStyle='#78C430';
var text = this.renderArr[2];
//提示內容的改變
text.fillStyle='white';
text.text="驗證成功";
}
成功後如下：
完整代碼下載
到此這篇關於JavaScript實現拖動滑塊拼圖驗證（html5、canvas）的文章就介紹到這瞭,更多相關js實現拖動滑塊拼圖驗證內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- JavaScript實現頁面動態驗證碼的實現示例
- JS Canvas接口和動畫效果大全
- vue js中實現圖片壓縮封裝方法
- Vue使用canvas實現圖片壓縮上傳
- Vue使用Canvas生成隨機大小且不重疊圓