本文介绍如何使用 HTML5 Canvas 元素绘制随机验证码。通过封装生成随机数与随机颜色的方法，在指定画布区域内绘制干扰线条、圆形及随机字符，实现一个可刷新的验证码组件。
Canvas 绘制随机验证码实现
本文提供使用 Canvas 绘制随机验证码的具体代码示例，供参考学习。
理论基础：
需要掌握利用 Canvas 绘制线条、圆形以及文字的方法。
实现思路：
首先构建一个画布，并直接通过 canvas 标签设置其宽高（注意这与在 style 中设置的区别）。接着封装一个生成随机数的方法，用于确定线条和圆形的随机位置。这些随机位置的范围基于画布的宽高区间（0 到画布宽高）。同时定义随机字符，通过获取随机索引值来生成验证码。若需刷新功能，可将相关代码封装在函数中，并通过事件触发执行。
源代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas验证码</title>
</head>
<body>
<canvas id="code" width="80" height="30" style="border: 1px solid #ccc"></canvas>
<script src="jq/jquery-3.2.1.min.js"></script>
<script>
var canvasW=$("#code").width();
var canvasH=$("#code").height();
//获取任意区间随机数
var getRandom=function (maxNum) {
return Math.floor(Math.random()*maxNum);
}
//随机颜色
var getColor=function () {
var r=getRandom(256),
g=getRandom(256),
b=getRandom(256);
return "rgb("+[r,g,b].join(',')+")";
}
var ctx=$("#code")[0].getContext("2d");
var lineNum=3,arcNum=20;
//绘制线
for (var i=0;i<lineNum;i++){
ctx.beginPath();
ctx.moveTo(getRandom(canvasW),getRandom(canvasH));
ctx.lineTo(getRandom(canvasW),getRandom(canvasH));
ctx.strokeStyle=getColor();
ctx.closePath();
ctx.stroke();
}
//绘制点
for (var i=0;i<arcNum;i++){
ctx.beginPath();
ctx.arc(getRandom(canvasW),getRandom(canvasH),1,0,2*Math.PI);
ctx.fillStyle=getColor();
ctx.closePath();
ctx.fill();
}
//绘制验证码
var codeTxt="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";;
for(var i=0;i<4;i++){
var txt=codeTxt.split("")[getRandom(codeTxt.length)];
//绘制验证码
ctx.beginPath();
ctx.font="23px 微软雅黑";
ctx.fillStyle=getColor();
ctx.fillText(txt,20*i,25);
ctx.closePath();
}
</script>
</body>
</html>最终效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。