canvas之验证码插件

今天是个特别的日子，祝打开这篇博客的小伙伴们圣诞节快乐^_
今天分享个好用的插件，是用插件写的，话不多说，首先上效果图

image.png
首先说说思路吧，验证码，无非就是，文字，干扰项。文字可以是数字，小写字母大写字母，干扰项可以是线条，图形等，加上颜色的变化，一个验证码就ok了。
html代码

<canvas id="mycanvas" width="100" height="30">您的浏览器不支持canvas</canvas>
<a href="##" onclick="location.replace(document.referrer);">如果看不清，请重新选一张</a>

css代码

canvas{ border: 1px solid red;}
a{ text-decoration: none;font-size: 12px;}

js代码

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//随机数
function randNum(max,min){
      return parseInt(Math.random()*(max-min))+min;
}
//干扰线
for(var i=0;i<5;i++){
    var str = strStore[randNum(0,strStore.length)];
    context.moveTo(randNum(0,100),randNum(0,30));
    context.lineTo(randNum(0,100),randNum(0,30));
    context.stroke();
}
//干扰圆
context.arc(randNum(0,100),randNum(0,100),randNum(0,10),0,Math.PI*2);
context.stroke();
//随机背景
context.beginPath();
var colors =`rgb(${randNum(100,155)},${randNum(100,155)},${randNum(100,155)})`;
context.globalAlpha = 0.5;
context.fillStyle = colors;
context.fillRect(0,0,canvas.width,canvas.height);
//随机字
for(var i=0;i<5;i++){
//随机颜色
    var colors =`rgb(${randNum(0,255)},${randNum(0,255)},${randNum(0,255)})`;
    var str = strStore[randNum(0,strStore.length)];
    context.beginPath();
    context.fillStyle = colors;
    context.font =randNum(15,25) +"px Arial";
    context.fillText(str,i*20,randNum(15,25));
}

这样一个插件就OK啦！