实现canvas简单的验证码

Posted 2021-11-30 rakinda

首先，canvas：固定在浏览器上的画布，浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。
canvas为我们敞开了新一扇大门。
属于html5中新增的一个标签，看起来与其他标签区别不大，在验证码之前，应该学习canvas相关API，

本次用到的canvas方法 ：
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
fillRect() 绘制“被填充”的矩形
stroke() 绘制已定义的路径
moveTo() 把路径移动到画布中的指定点，不创建线条
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
arc() 创建弧/曲线（用于创建圆形或部分圆）
font 设置或返回文本内容的当前字体属性

 

var canvas = document.querySelector("#canvas");
console.log(canvas);
var cxt = canvas.getContext(‘2d‘);//绘图上下文环境

//绘制验证码图片
draw();
canvas.onclick = function(){
// console.log(‘1‘);
draw();
};
function draw(){
// 绘制一个颜色随机的矩形
cxt.beginPath();
cxt.fillStyle = randColor(170,250);//把颜色放到一个方法
cxt.fillRect(0,0,120,30);
cxt.closePath();
var data = ‘abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ0123456789‘;
for(var i = 0; i <= 90; i +=30){//四位验证码
var c = data[randNum(0,data.length - 1)];
cxt.beginPath();
cxt.fillStyle = randColor(60,160);
cxt.font = randNum(15,40) + ‘px SimHei‘;
cxt.fillText(c, i + randNum(0,15),randNum(15,30));//[0,15) [30,45) [60,75) [90,115)
cxt.closePath();
}
//渲染干扰线
for(var j = 0; j < 10; j ++){
cxt.beginPath();
cxt.moveTo(randNum(0,120), randNum(0,120));//这里的randNum(min,max)与canvas的画板宽高相联系，
cxt.lineTo(randNum(0,120), randNum(0,120));
cxt.strokeStyle = randColor(60,120);
cxt.stroke();
}
for(var i = 0; i < 10; i ++){
cxt.beginPath();
cxt.strokeStyle = randColor(50,130);
cxt.arc(randNum(0,120),randNum(0,30),randNum(1,3),0,2*Math.PI);
cxt.stroke();
cxt.closePath();
}
}
function randColor(min,max){//max+1是取不到的，但是max是可以取到的，所以向下取整刚好取到[min,max]。
var r = Math.floor(Math.random()*(max-min + 1)+min);//Math.random * （max- min)==>[o,min)变成[min,max-min]的范围
var g = Math.floor(Math.random()*(max-min + 1)+min);
var b = Math.floor(Math.random()*(max-min + 1)+min);
return ‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘;
}

function randNum(min,max){
var num = Math.floor(Math.random()*(max-min + 1)+min);
return num;
console.log(num);
}