js+canvas绘制图形验证码
本文实例为大家分享了利用canvas绘制图形验证码的具体代码，供大家参考，具体内容如下
思路：通过随机获取指定字符串的指定数的字符，通过canvas绘制出来
返回指定范围的随机整数
//指定范围的随机函数：返回指定范围内的随机整数
functionrand(min,max){
/*
max=10
min=1
Math.random()=0最小取到1
Math.random()=0.9999*10=Math.floor(9.9)=>+1=10
*/
returnMath.floor(Math.random()*(max-min+1))+min;
}
返回指定数量的随机字符串
functionrandStr(count){
varstr='1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
varcode='';
for(vari=0;i
绘制图形
functionverify(selector){
//获取canvas的dom对象
varcas=document.querySelector(selector);
//获取上下文对象
varctx=cas.getContext('2d');
//指定接收的字符串
varcode=randStr(5);
//绘制矩形，作背景色
ctx.fillStyle='orange';
//绘制实心矩形
ctx.fillRect(0,0,160,50)
//文字居中
//ctx.textAlign='left'
//字体样式的属性要遵循css中的书写顺序
ctx.font='90024px宋体'
//设置字体颜色
ctx.fillStyle='#FFF';
//绘制文字
ctx.fillText(code,20,30);
}
鼠标点击更新验证码
document.querySelector('canvas').addEventListener('click',function(){
verify('canvas')
})
完整代码
绘制图形验证码