html部分
react中的写法
//页面加载时生成验证码
componentDidMount(){
codeCanvas(this.refs.codeShow);
}
//点击验证码会更换新验证码
changeCode(){
codeCanvas(this.refs.codeShow);
}
//render中
<canvas ref="codeShow" width='80' height='36' title="看不清,点我换一张" onClick={() => this.changeCode()}></canvas>
html中的写法
//js中
window.onload = function(){
codeCanvas(document.getElementById("codeShow"));
}
//HTML代码
<canvas id="codeShow" width='80' height='36' title="看不清,点我换一张" onclick="..."></canvas>
js部分
//提供全局变量表示当前的验证码,便于验证
var code;
//生成验证码字符
function createCode(){
code = "";
var random = new Array(0,1,2,3,4,5,6,7,8,9, 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
//验证码长度为4位
var codeLength = 4;
for(let i = 0;i < codeLength;i++){
//验证码的字符在array中的下标在0-36之间
var index = Math.floor(Math.random()*36);
code += random[index];
}
return code;
}
//干扰线的随机x坐标值
function lineX(){
//坐标值在width之内
var ranLineX = Math.floor(Math.random()*80);
return ranLineX;
}
//干扰线的随机y坐标值
function lineY(){
//坐标值在height之内
var ranLineY=Math.floor(Math.random()*36);
return ranLineY;
}
//传入的参数表示canvas节点
//传入参数主要是在react中方便使用,若为原生HTML,可在此方法内通过getElementById的方法直接获取节点
function codeCanvas(codeShow){
var cxt=codeShow.getContext('2d');
//背景颜色
cxt.fillStyle='#8dd5e7';
//矩形左上角x,y坐标以及矩形宽高
cxt.fillRect(0,0,80,36);
//生成干扰线20条
for(var j=0;j<20;j++){
//线条的颜色
cxt.strokeStyle='#666';
//若省略beginPath,则每点击一次验证码会累积干扰线的条数
cxt.beginPath();
cxt.moveTo(lineX(),lineY());
cxt.lineTo(lineX(),lineY());
cxt.lineWidth=0.5;
cxt.closePath();
cxt.stroke();
}
//不设置的话里面的文本颜色就是和上面设置的背景色相同
cxt.fillStyle='#fff';
cxt.font='bold 20px Arial';
//把生成的随机数文本填充到canvas中
cxt.fillText(createCode(),16,24);
}