JS HTML5画布绘制验证码示例

本文实例讲述了JS HTML5画布绘制验证码。分享给大家供大家参考，具体如下：

钢性铸铁样式：

样式正文{ text-align : center}画布{ background : # DDD }/style html部分：

身体中添加标签画布：

canvasjs画布id='c3'/canvasjs部分：

//创建两个变量保存验证码的宽度和高度var w=120var h=30/将变量值赋值给帆布C3。宽度=w；c3。高度=h；//获取画笔CTX=C3。GetContext(' 2d ')；//创建两个函数，返回指定范围内的随机数，随机颜色//随机数函数rn(最小值，最大值){ var n=数学。random()*(max-min)min；返回数学。楼层(n)；}//随机颜色函数rc(最小值，最大值){ var r=rn(最小值，最大值);var g=rn(最小值，最大值);var b=rn(最小值，最大值);返回` rgb(${r}、${g}、$ { b })`；}//填充的背景ctx.fillStyle=rc(180，230)；ctx.fillRect(0，0，w，h)；//创建一个随机的文字[字母和数字]4个var pool=' ABCDEFGHIJKabced胡歌0123456789哈哼哈哈；var str=for(var I=0；i4；I){ var index=math。地板(数学。random()*池。长度)；str=池[索引];}//控制台。日志；CTX . font=' 30px simheictx . FillStyle=RC(80，180)；//文字颜色CTX . TextBaseline=' topctx . FillText(str，20，0)；//在(20,0)处开始填充文字//绘制6条干扰线for(var I=0；i6；i ){ ctx.strokeStyle=rc(0，255)；CTX。begin path()；ctx.moveTo(rn(0，w)，rn(0，h))；ctx.lineTo(rn(0，w)，rn(0，h))；CTX。笔画()；}//绘制50个干扰点for(var I=0；i50i ){ ctx.fillStyle=rc(0，255)；CTX。begin path()；ctx.arc(rn(0，w)，rn(0，h)，1，0，2*Math .PI)；CTX。fill()；}感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun，测试上述代码运行效果。

或者使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试如下完整示例代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .jb51。网画布绘制验证码/title style body { text-align : center；} canvas { background : # DDD }/style/head dycanvas id=' C3 '/拉票脚本//创建两个变量保存验证码的宽度和高度var w=120var h=30/将变量值赋值给帆布C3。宽度=w；c3。高度=h；//获取画笔CTX=C3。GetContext(' 2d ')；//创建两个函数，返回指定范围内的随机数，随机颜色//随机数函数rn(最小值，最大值){ var n=数学。random()*(max-min)min；返回数学。楼层(n)；}//随机颜色函数rc(最小值，最大值){ var r=rn(最小值，最大值);var g=rn(最小值，最大值);var b=rn(最小值，最大值);返回` rgb(${r}、${g}、$ { b })`；}//填充的背景ctx.fillStyle=rc(180，230)；ctx.fillRect(0，0，w，h)；//创建一个随机的文字[字母和数字]4个var pool=' ABCDEFGHIJKabced胡歌0123456789哈哼哈哈；var str=for(var I=0；i4；I){ var index=math。地板(数学。random()*池。长度)；str=池[索引];}//控制台。日志；CTX . font=' 30px simheictx . FillStyle=RC(80，180)；//文字颜色CTX . TextBaseline=' topctx . FillText(str，20，0)；//在(20,0)处开始填充文字//绘制6条干扰线for(var I=0；i6；i ){ ctx.strokeStyle=rc(0，255)；CTX。begin path()；ctx.moveTo(rn(0，w)，rn(0，h))；ctx.lineTo(rn(0，w)，rn(0，h))；CTX。笔画()；}//绘制50个干扰点for(var I=0；i50i ){ ctx.fillStyle=rc(0，255)；CTX。begin path()；ctx.arc(rn(0，w)，rn(0，h)，1，0，2*Math .PI)；CTX。fill()；}/脚本/正文/html运行结果如下：

更多关于Java脚本语言相关内容还可查看本站专题： 《JavaScript+HTML5特效与技巧汇总》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。