今天是个特别的日子, 祝打开这篇博客的小伙伴们圣诞节快乐_
今天分享个好用的插件, 是用插件写的, 话不多说, 首先上效果图
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 啦!
来源: http://www.jianshu.com/p/511fa567f2dd