您的位置：首页 > Web前端 > JavaScript

js验证码实现---使用Canvas绘制一个随机改变的验证码图片

2018-10-09 16:30 781 查看

使用Canvas绘制一个随机改变的验证码图片,如下图

      

var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';

var char = str[ 0~字符串长度间的随机数 ]; 

 要求：

         画布背景颜色随机(浅色)  ctx.fillRect()

文字内容随机、大小随机，颜色随机(深色)、旋转角度随机。

         5条随机干扰线（深色），处于文字上方。

         100个杂色点（半径为1为圆），处于文字上方。

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>使用canvas绘制一幅验证码图片</h3>
<h4>真正的项目中,验证码图片是由服务器页面(如PHP)生成的,此练习仅仅作为演示</h4>
<canvas id="c1"></canvas>
<a href="javascript:void(0)" onclick="location.reload()">看不清?换一张</a>
<script>
var w=120; //画布的宽
var h=30;  //画布的高
c1.width=w;
c1.height=h;
var ctx=c1.getContext('2d');

//绘制随机的背景颜色---填充一个大的矩形
ctx.fillStyle=rc(180,230);
ctx.fillRect(0,0,w,h);
//绘制随机的文本--难点
ctx.textBaseline='top';
var pool='ABCDEFGHJKLMNPQRSTWXY3456789';
for(var i=0;i<4;i++){
var txt=pool[rn(0,pool.length)];
ctx.fillStyle=rc(80,180);
ctx.font=rn(10,20)+'px Arial';
var txtWidth=ctx.measureText(txt).width;

ctx.save();
//平移原点+旋转画笔
ctx.translate(i*30+15,15);
ctx.rotate(rn(-15,15)*Math.PI/180);
ctx.fillText(txt,rn(-15,15-txtWidth),rn(-15,15-txtWidth));
ctx.restore();
}
//绘制6条随机干扰线
for(var i=0;i<6;i++){
ctx.beginPath();
ctx.moveTo(rn(0,w),rn(0,h));
ctx.lineTo(rn(0,w),rn(0,h));
ctx.strokeStyle=rc(80,180);
ctx.stroke();
}
//绘制50个干扰点--半径为1的圆
for(var i=0;i<50;i++){
ctx.beginPath();
ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
ctx.fillStyle=rc(80,230);
ctx.fill();
}
// random number:生成指定范围内的随机整数
function rn(min,max) {
return Math.floor(Math.random()*(max-min)+min);
}
//random color:生成指定范围内的随机颜色
function rc(min,max) {
var r=rn(min,max);
var g=rn(min,max);
var b=rn(min,max);
return `rgb(${r},${g},${b})`;
}

</script>
</body>
</html>

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航