哈哈，好久没冒泡了。第一眼点击验证码很有意思，所以想自己写一个。

首先，应用渲染

如果你被这种效果所吸引，请继续观看。

在发布代码之前，请说出一些想法：

1要有中文字库，并按字体分类。(数据库里我是安分类的。)

2.获取验证码(即取几个字作为验证码)

3.根据提取的单词寻找相似的字符

4.排列验证码文字和类似文字

5.画画

6.显示

首先，获取单词stock

我们的文化博大精深。热词从何而来？当然我也不能手动添加，所以就随便找了一个可以在网上查汉字的网站来抓拍别人的数据。请点击门户获取数据的方法。传送门里说的只是思路。如果你不明白，请向我询问。我将在下面分享我的字体库。

第二，获取验证码

这个比较简单。我会直接在这里粘贴代码。下面的代码是随机排序，取4条数据。我写这个是为了方便图表。我个人认为先随机生成ID，然后根据ID直接取数据，查询速度会比下面的编写方法更快。(注意我的数据库是MySql)

///summary////获取验证码////summary public list verificationcode . model . wenzhi getcodetext(){ const string SQL=' select * from文志order by rand()' limit 4 '；var dataReader=dbHelper。GetDataReader(SQL)；var list=DataReaderTolist(DataReader)；数据阅读器。close()；退货清单；}第三，根据提取的单词寻找相似的字符

因为我在第一步中保存了部首，这里直接根据部首得到当前部首的近端字符。

///总结///得到答案。////summary////param name=' bushoucode '部首代码/param ///param name='id '当前文本ID/param///param name=' number ' quantity/param///returns/returns public list verificationcode。Model .文志GetAnswer(字符串buShouCode，int id，int number=1) {字符串sql=$'SELECT * FROM文志其中BuShouCode='{buShouCode} '和ID { ID } ORDER BY RAND()LIMIT ' number；var dataReader=dbHelper。GetDataReader(SQL)；var list=DataReaderTolist(DataReader)；数据阅读器。close()；退货清单；} 4.排列验证码文本和类似字符

下面的代码是将备选答案和验证码放在一个集合中，然后对集合进行排序

公共模型。code GetCode(){ var wenz list=_ wenZhiDal。GetCodeText()；//获取验证码var listAnsuwr=new ListAnswer()；//实例化备选答案对象var answerCode=string。空的；//答案var result=new model . code { id=guid . new guid()。tostring()}；//根据验证码获取备选答案，将添加的答案添加到备选答案集合foreach(wenz列表中的var项){answercode=item.id '，'；结果。AnswerValue=item。文字；var answerList=_wenZhiDal。GetAnswer(项目。卜寿码，物品。ID)；listAnsuwr。添加(新答案{ Id=item。ID.ToString()，Img=GetImage(item。text)})；listAnsuwr。添加范围(应答列表。选择(答案=新答案{ Id=答案。ID.ToString()，Img=GetImage(答案。text)}))；}//如果没有足够的答案，多拿几个if (listansuwr。count 9){ var ran=new random()；var randKey=ran。下一个(0，4)；var item=wenz list[RAndKey]；var answerList=_wenZhiDal。GetAnswer(项目。卜寿码，物品。ID，9 - listAnsuwr。计数)；listAnsuwr。添加范围(应答列表。选择(答案=新答案{ Id=答案。ID.ToString()，Img=GetImage(答案。text)}))；}结果。CodeImg=GetImage(结果。AnswerValue)；//获取图片结果。answervalue=answercode。trimend('，')；结果。答案=randomsortList(listanSuwR)；//打乱正确答案和相似词返回结果的顺序；}这是对集合进行排序的代码

///摘要///随机排列集合////summary///type param name=' T '/type param///param name=' listT '/param///returns/returns private static listT RandomSortListT(IEnumerablet listT){ var Random=new Random()；var NewList=new ListT()；foreach(列表中的定义变量项){ newList .插入（随机。下一个(新列表.计数1),项);}返回新列表}五、绘制图片

下面是画图的代码，验证码和备选答案对应两种不同的画法（里面注释写的还算清楚)。不要担心文字旋转x后人类分不出来，哈哈。代码最后一句我把图片转成了Base64，方便前端调用。

私有静态字符串GetImage(字符串文本){图像图像开关（文本。长度){大小写1:图像=新位图(50,40);打破；案例4:图像=新位图(120,40);打破；默认值：图像=新位图(50,40);打破；}画笔文本=新的SolidBrush(颜色FromArgb(255，0，0，0))；定义变量图形=图形FromImage(图像);图形。平滑模式=平滑模式。抗锯齿；图形。清晰（颜色。白色);var字体=新字体（新字体系列('华文彩云)，20，FontStyle .常规);如果(文本。长度1)//画验证码{ //先来两条直线做干扰然后再画文字图形。画线（新钢笔（画笔文本，新随机()。下一个(1,3)),新点（新随机()。下一个(0,10),新的随机()。接下来(10,40)),新点（新随机()。接下来(100,120),新的随机()。Next(10，30)))；图形。画线（新钢笔（画笔文本，新随机()。下一个(1,3)),新点（新随机()。下一个(20,50),新的随机()。下一个(0,10)),新点（新随机()。接下来(100,120),新的随机()。下一个(30,40)));图形。拉绳（文本、字体、画笔文本、0、10);} else//画备选答案{点中间=新点(25,20);图形TranslateTransform(中间x，中间y)；//这里是360 随机旋转图形。旋转转换（新的随机()。Next(0，360))；var format=新的字符串格式(字符串格式标志.没有剪辑){对齐=字符串对齐.中心，线性对齐=字符串对齐。中心};图形。拉绳（文本、字体、画笔文本、0、0、格式);}画笔文本.dispose()；图形dispose()；返回ImageToBase64(图像);} 六、显示

直接调用GetCode方法就能返回验证码对象

下面是后台代码，应为正确答案是放在答案值里的所以我先把取出来放会议里面，然后把值清空后再通过json返回给浏览器。

公共字符串GetVerCode(){ var code=new VerificationCode .代码()。GetCode()；会话['VERCODE']=代码。答案值；代码答案值=返回JsonConvert .SerializeObject(代码);} 现在来堆点超文本标记语言代码

div class=' form-group ' ul class=' vercode ' liimg src=' '//Li liimg src=' '//Li liimg src=' '//Li liimg src=' '//Li Li class=' delete ' onclick=' delete _ input()'/Li/ul div img id=' code-image '/a href=' JavaScript : void(0)；onclick='load_vercode()'看不清？/a/div ul class=' vercode-anwser ' liimg//Li liimg//Li liimg//Li liimg//Li liimg//Li liimg//Li liimg//Li/ul/div再来点射流研究…代码，这里只实现的图片上的效果，还没对数据验证（这里说说验证思路：每个图片对应一个身份证，取到选择图片的身份用逗号分隔，然后与会议里的值对比)

script $(function () { //加载验证码load _ ver code()；//绑定验证码点击事件$('.vercode-anwser ').查找(' img ').on('click '，null，function () { $(').vercode ').find('img[src='']:eq(0)').attr('src '，$(this).attr(' src ')；});});函数load_vercode() { $(' .vercode ').查找(' img ').attr('src '，' ')；$.get('GetVerCode '，函数（数据){ var result=JSON.parse(数据);$(“# code-image”).attr('src '，' data : image/png；base64，结果. CodeIMg)；$('.vercode-anwser ').查找(' img ').每个（函数（索引){ $(这个)).attr('src '，' data : image/png；base64，结果。答案[索引]。img)；});});} //删除事件函数delete_input() { $(').vercode ').find('img[src！='']:last ').attr('src '，' ')；}/脚本到这里代码就差不多了，以上思路只是单纯的个人想法，有兴趣的朋友一起来讨论吧。

源代码在这里-地址http://夏哉。JB 51。net/201701/马援/VerificationCode_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。