아이디어 소개:
HTML5의 캔버스 태그를 사용하여 먼저 캔버스를 생성한 다음 임의의 숫자를 사용하여 캔버스에 인증 코드를 생성하고 배경을 임의의 색상과 지저분한 직선으로 바꿀 수 있습니다.
(동영상 공유 학습: html5 동영상 튜토리얼)
고급 방법:
양식 플러그인 속성을 사용하여 인증 코드 데이터(json)를 바인딩하여 전송 또는 비동기 통신 중에 배경 데이터를 얻고 확인할 수 있습니다.
특정 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码</title>
<style type="text/css">
#canvas{
cursor:pointer;
}
</style>
</head>
<body>
<canvas id="canvas" width="150px" height="50px"></canvas>
<script>
//生成随机数
function randomNum(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
//生成随机颜色RGB分量
function randomColor(min,max){
var _r = randomNum(min,max);
var _g = randomNum(min,max);
var _b = randomNum(min,max);
return "rgb("+_r+","+_g+","+_b+")";
}
//先阻止画布默认点击发生的行为再执行drawPic()方法
document.getElementById("canvas").onclick = function(e){
e.preventDefault();
drawPic();
};
function drawPic(){
//获取到元素canvas
var $canvas = document.getElementById("canvas");
var _str = "0123456789";//设置随机数库
var _picTxt = "";//随机数
var _num = 4;//4个随机数字
var _width = $canvas.width;
var _height = $canvas.height;
var ctx = $canvas.getContext("2d");//获取 context 对象
ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
ctx.fillStyle = randomColor(180,240);//填充画布颜色
ctx.fillRect(0,0,_width,_height);//填充矩形--画画
for(var i=0; i<_num; i++){
var x = (_width-10)/_num*i+10;
var y = randomNum(_height/2,_height);
var deg = randomNum(-45,45);
var txt = _str[randomNum(0,_str.length)];
_picTxt += txt;//获取一个随机数
ctx.fillStyle = randomColor(10,100);//填充随机颜色
ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小，字体为SimHei
ctx.translate(x,y);//将当前xy坐标作为原始坐标
ctx.rotate(deg*Math.PI/180);//旋转随机角度
ctx.fillText(txt, 0,0);//绘制填色的文本
ctx.rotate(-deg*Math.PI/180);
ctx.translate(-x,-y);
}
for(var i=0; i<_num; i++){
//定义笔触颜色
ctx.strokeStyle = randomColor(90,180);
ctx.beginPath();
//随机划线--4条路径
ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
ctx.stroke();
}
for(var i=0; i<_num*10; i++){
ctx.fillStyle = randomColor(0,255);
ctx.beginPath();
//随机画原，填充颜色
ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
ctx.fill();
}
return _picTxt;//返回随机数字符串
}
drawPic();
</script>
</body>
</html>관련 권장 사항: html5 tutorial
위 내용은 HTML5에서 인증 코드를 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!