JavaScript使用canvas绘制随机验证码-创新互联

本文实例为大家分享了使用canvas绘制随机验证码的具体代码，供大家参考，具体内容如下

10年积累的成都做网站、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先制作网站后付款的网站建设流程，更有曲沃免费网站建设让你可以放心的选择与我们合作。

理论基础：

掌握使用canvas绘制线条和圆形以及绘制文字

实现思路：

先构建一个画布，设置一定的宽高（在canvas中设置宽高和在style中设置是有区别的，建议直接在canvas标签中设置），封装一个生成随机数的方法，为线条和圆形的绘制设置随机的位置，既然是随机的，必然是有随机的区间，先获取画布的宽高，线条和圆的位置就是（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" ></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>

新闻名称：JavaScript使用canvas绘制随机验证码-创新互联
新闻来源：https://www.cdcxhl.com/article12/dgsogc.html

成都网站建设公司_创新互联，为您提供建站公司、网站导航、微信小程序、响应式网站、标签优化、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容