在通常的登录界面，我们可以看到验证码。验证码的作用是检测人是否在操作，防止机器等非人类操作，防止数据库容易被破坏。

验证码一般用后端语言编写，比如PHP和java。

但是在前端，验证码也可以用canva或者SVG来绘制。

绘图验证码不能是简单的随机字符串，但绘图界面应该有一些干扰项：

比如干涉线段、干涉点、背景等等。

这里演示的画布验证码的干扰项比较简单。

您可以在图表中看到本例中的干扰项。

画布验证码显示效果：

单击以更改(重绘)验证码：

在控制台上运行函数，输出返回值(验证码):

源代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title canvas验证码/标题/床头柜画布宽度='200 '高度=' 60 ' id=' check ' style=' border :1 px solid # 000；'您的浏览器不支持帆布标签！/canvas脚本var CTX=文档。getelementbyid(' check ').getContext(' 2d ')；var ctxW=文档。getelementbyid(' check ').clientWidthvar ctxH文档。getelementbyid(' check ').clientHeight/** *产生一个随机数可设置随机数区间* @ param {[数字]}分钟[随机数区间下限] * @param {[Number]} max [随机数区间上限]* @返回{[数字]} [返回一个在此区间的随机数] */函数ranNum(min，max){返回数学。random()*(max-min)min；} /** * 返回一个随机颜色可设置颜色区间* @ param {[数字]}分钟[颜色下限] * @param {[Number]} max [颜色上限] * @return {[String]} [随机颜色] */函数ranColor(最小值，最大值){ var r=ranNum(最小值，最大值)；var g=ranNum(最小值，最大值);var b=ranNum(最小值，最大值);//返回RGB '(r '，' g '，' b ')；返回` rgb(${r}、${g}、$ { b })`；} /** * 随机字符串数组* @return {[Array]} [随机数组]*/function ranStr(){ var str=' qwertyuiopadghjklzxcvbnmqwertyuiopadghjklzxcvbnm 0123456789 '；返回str.split(" ").sort(function(){ return math。random()-0.5 })；} /** * 绘制文本字符串* @ param {[字符串]} canvasId[画布的id]* @ param {[Number]} canvasW[画布的宽度]* @ param {[Number]} canvasH[画布的高度]* @ param {[数字]}数量[绘制验证码的字数] * @param {[Number]} fsMin [字体大小下限] * @param {[Number]} fsMax [字体大小上限] * @param {[Number]} frMin [字体旋转偏移下限] * @param {[Number]} frMax [字体旋转偏移上限]* @参数{[数字]}分钟[颜色下限] * @param {[Number]} max [颜色上限] * @return {[String]} [随机字符串] */function drawText(canvasId、canvasW、canvasH、num、fsMin、fsMax、frMin、frMax、Min、max){ var str=' '；for(var I=0；I NuMi){ var char=ranStr()[数学。楼层(0，ranStr().长度)];var fs=ranNum(fsMin，FSmax)；canvasid . font=fs ' px verdancanvasid . fillstyle=ranColor(最小值，最大值);//保存绘制的状态canvasid。save()；//context.translate(x，y)；//x添加到水平坐标上的值//y添加到垂直坐标(y)上的值//偏移canvasid。翻译(canvasW/num * I canvasW/20，0)；//变换角度canvasId.rotate(ranNum(frMin，frMax) * Math .PI/180)；//context.fillText(text，x，y，maxWidth)；//文本规定在画布上输出的文本//x。开始绘制文本的x坐标位置（相对于画布)。//y开始绘制文本的y坐标位置（相对于画布)。//maxWidth可选。允许的最大文本宽度，以像素计。

canvasId.fillText(char，0，(canvasH fs)/2.5，canvasW/num)；//返回之前保存过的路径状态和属性CTX。restore()；str=char }//控制台。日志；返回字符串；} /** * 绘制背景* @ param {[字符串]} canvasId[画布的id]* @ param {[Number]} canvasW[画布的宽度]* @ param {[Number]} canvasH[画布的高度]* @参数{[数字]}分钟[下限] * @param {[Number]} max [上限] */function drawBg(canvasId、canvasW、canvasH、min、max) { //绘制帆布背景canvasId.fillStyle=ranColor(最小值，最大值);//填充颜色canvasId.fillRect(0，0，canvasW，canvasH)；} /** * 绘制干扰圆点* @ param {[字符串]} canvasId[画布的id]* @ param {[Number]} canvasW[画布的宽度]* @ param {[Number]} canvasH[画布的高度]* @ param {[数字]}数量[绘制的数量] * @param {[Number]} r [圆点半径]* @参数{[数字]}分钟[下限] * @param {[Number]} max [上线] */函数drawCircle(canvasId，canvasW，canvasH，num，r，min，max){ for(var I=0；i numi ) { //开始绘制（拿起笔)canvasid。begin path()；//context.arc(x，y，r，桑乐，eAngle，逆时针);（绘制)//x圆的中心的x坐标//y。圆的中心的y坐标//r。圆的半径//桑乐起始角，以弧度计。(弧的圆形的三点钟位置是0 度)。//eAngle结束角，以弧度计//逆时针。可选。规定应该逆时针还是顺时针绘图错误=顺时针，真=逆时针canvasId.arc(ranNum(0，canvasW)，ranNum(0，canvasH)，r，0，2 * Math .PI)；//填充颜色canvasId.fillStyle=ranColor(最小值，最大值);//填充canvasid。fill()；//闭合绘制（放开笔)canvasid。close path()；} } /** * 绘制干扰线段* @ param {[字符串]} canvasId[画布的id]* @ param {[Number]} canvasW[画布的宽度]* @ param {[Number]} canvasH[画布的高度]* @ param {[数字]}数量[绘制的数量]* @参数{[数字]}分钟[下限] * @param {[Number]} max [上线] */函数画线(canvasId、canvasW、canvasH、num、min、max){ for(var I=0；i numi ) { //开始绘制（拿起笔)canvasid。begin path()；//绘制开始点canvasId.moveTo(ranNum(0，canvasW)，ranNum(0，canvasH))；//绘制结束点canvasId.lineTo(ranNum(0，canvasW)，ranNum(0，canvasH))；canvasId.strokeStyle=ranColor(最小值，最大值);canvasid。笔画()；canvasid。close path()；} } //绘制验证码函数drawCanvas() { //清空canvas ctx.clearRect(0，0，200，60)；//绘制背景drawBg(ctx，ctxW，ctxH，200，255)；//绘制干扰圆点drawCircle(ctx，ctxW，ctxH，20，5，200，255)；//绘制干扰线段drawLine(ctx，ctxW，ctxH，20，0，255)；//绘制验证码var str=drawText(ctx，ctxW，ctxH，4，10，50，-30，30，0，100)；返回字符串；}绘制画布()；document.getElementById('check ').onclick=drawCanvas/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。