刚刚开始接触帆布，写个验证码小功能练练手，实现效果图如下：

主要代码如下：

超文本标记语言

！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 document/title link rel='样式表href='索引。CSS ' rel=' external no follow '/head dy div class=' wrapper ' div class=' InputBox '输入类型=' text ' class=' input captcha '占位符='请输入验证码span class=' capt chicon '/span/div p class='错误文本'/p div class=' canvasBox ' div class=' imageBox '画布宽度=300高度=80 id=' canvasCaptcha '/画布输入类型=' button ' class=' refresh '/div/div button class=' CaptchSubmit ' submit/button/div script src=' ./jquery.js'/script script src=' ./index.js'/script/body/htmlcss

* { margin : 0；padd : 0；}.包装纸{ width: 345pxborder: 1px固体# cccborder-radius : 10px；padd : 20px 10pxmargin : 30px 30px }。inputBox { width : 345 pxmargin 3360 0 auto 10px相对位置：}.输入箱.输入验证码{ display : inline-block；高度： 50px宽度： 86%;文本缩进： 1emborder: 1px固体# dddb order-radius : 5px；}.输入箱.captchaIcon { display:无绝对位置：前：名50%；右： 0px边距-top :-16px；宽度： 32px高度： 32px背景尺寸： 100% 100%;}.错误文本{ width : 345 pxmargin : 0 auto font-size : 12px；颜色：红色；显示器：无；}.canvasBox { width : 345 pxmargin : 10px自动；相对位置：} # canvasCaptcha { border-radius : 10px；}.canvasBox .刷新{ width : 34 px h8 : 34 px绝对位置：right : 0pxtop : 50%；边距-top :-17px；边框： 0；边界半径： 6px背景-image: url(' ./images/更新。png ')；背景尺寸：封面；}.captchaSubmit { padd : 10px 20px；背景-颜色： # 62b 900边框： 0；font-size : 20px边界半径： 5pxcolor: # fff}js

var arr=[0，1，2，3，4，5，6，7，8，9]；for(var I=65；I 122I){ if(i90i 97){ continue；} arr。推(字符串。FromCharCode(I))；}//每个验证码可能出现的字母或数字（区分大小写)变量arr.length//验证码的长度var Lactr，value//验证码值函数create canvas(){ LATCH tr=' '；值=' ';for(var I=0；i6；I){ var a=arr[数学。地板(数学。random()* len)]；拉票=a值=a；}//canvas var oCanvas=document。getelementbyid(' canvasCaptcha ')；var CTX=ocanvas。get context(' 2d ')；var w=ocanvas . width var h=ocanvas . height var oImg=新图像();oImg.src=' ./images/BG。jpg '；oImg。onload=function(){ var pattern=CTX。创建模式(oImg，‘重复’)；CTX . FillStyle=pattern nctx . FillRect(0，0，w，h)；CTX . fillstyle=' # cccctx . textalign=' center CTX . font=' 46px Robot o Slabctx . settransform(1，-0.12，0.2，1，0，12)；CTX。FillText(Lacttr，w/2，60)；} } createCanvas()；//验证输入的验证码与图中验证码时候相等函数验证码(e){ if(e==value)}返回true} else { return false}}//点击提交按钮时的结果函数showResult(){ var inputValue=$(' .输入验证码').val()；if(InputValue==' ' | | InputValue==null | | InputValue==' undefined '){ $().错误文本')。css({display: '内联块' })。html(")验证码不能为空，请重新输入！');$('.captchaIcon ').css({display: '内联块'，backgroundImage:'url ')./images/false。png ')' })；} else { var flag=captcha(InputValue)；if(！标志){ $('。错误文本')。css({display: '内联块' })。html(")验证码错误，请重新输入!');$('.captchaIcon ').css({display: '内联块'，backgroundImage:'url ')./images/false。png ')' })；}else{ $(' .captchaIcon ').css({display: '内联块'，backgroundImage:'url ')./images/true。png ')' })；} }}$('.captchaSubmit ').点击（显示结果);//提交$('.刷新")。单击（创建画布);//刷新//点击投入框$('.输入验证码').focus(function(){ $(')).错误文本')。添加($(')。captchaIcon’).淡出(100)；})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。