canvas画图练习：绘制验证码

做一个canvas的练习,绘制一个验证码,通过这个练习能够熟悉canvas绘图的基本操作.

当然,正式网页上的验证码是通过后台语言编写出来的,这个练习并不能真正用来用作网页开发中的验证码.

代码如下:

<h1>canvas绘制练习：验证码</h1>
<canvas id="c3" width="500" height="400"></canvas>
var c3=document.getElementById("c3");
var ctx=c3.getContext("2d");
 
//画出浅色验证码背景
ctx.fillStyle=rc(180,230);
ctx.fillRect(190,185,120,30);
 
//写出5个随机大小,随机颜色,随机方向的数字
var pool="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for(var i=0;i<5;i++){
var num=pool[rn(0,pool.length-1)];
//随机数字大小
var rs=rn(18,30);
//随机角度
var rd=rn(-45,45);
//保存画笔
ctx.save();
//随机颜色
ctx.fillStyle=rc(0,255);
ctx.textBaseLine="top";
ctx.font=rs+"px Simhei";
//平移原点
ctx.translate(200+22*i,210);
//旋转画笔
ctx.rotate(rd*Math.PI/180);
//画出数字
ctx.fillText(num,0,0);
//恢复画笔
ctx.restore();
}
 
//绘制3条随机干扰线
for(var i=0;i<3;i++){
ctx.lineWidth=1;
//设置描边的颜色随机
ctx.strokeStyle=rc(0,255);
//开始一条新路径
ctx.beginPath();
//移动到随机位置
ctx.moveTo(rn(190,190+120),rn(185,215));
//到随机点画一条路径
ctx.lineTo(rn(190,190+120),rn(185,215));
//描边
ctx.stroke();
}
 
//绘制30个干扰点
for(var i=0;i<30;i++){
//设置填充随机颜色
ctx.fillStyle=rc(80,180);
//开始新路径
ctx.beginPath();
//绘制圆
ctx.arc(rn(190,190+120),rn(185,215),1,0,2*Math.PI)
//填充
ctx.fill();
}
 
//产生随机数
function rn(min,max){
var n=Math.floor(Math.random()*(max-min+1)+min);
return n;
}
 
//产生随机颜色
function rc(min,max){
var r=rn(min,max);
var g=rn(min,max);
var b=rn(min,max);
var color="rgb("+r+","+g+","+b+")";
return color;
}

最终效果:

截屏2020-04-20 下午9.46.40.png