利用帆布制作一个随机验证码：

1、clearRect:context.clearRect(x，y，宽度，高度);清空给定矩形内的指定像素

2、填充样式：设置画笔的颜色

3、旋转（度):旋转角度，以弧度旋转（弧度=学位*数学/180)

4、翻译():方法重新映射画布上的位置

5、数学随机():获取0-1之间的一个随机数，不包含一

！- HTML -！DOCTYPE html html head meta charset=' utf-8 '标题画布随机验证码/title/head body canvas id=' canvas ' width=' 100 ' height=' 40 ' style=' border : 1px纯红；显示器：块；margin: 0自动/帆布/车身脚本类型=' text/JavaScript ' var myCanvas=document。query selector(' # canvas ')；var blur=我的画布。get context(' 2d ')；//当点击画布时创建一个新的路径//验证码封装myCanvas.onclick=function() { //实现点击画布创建一个新的验证码blur.clearRect(0，0，100，40)；verify()；}验证();函数verify() { //绘制矩形框//blur.strokeRect(0，0，100，40)；//随机验证码var arr=[0、1、2、3、4、5、6、7、8、9、‘A’、‘B’、‘C’、‘D’、‘e’、‘F’、‘G’、‘H’、‘I’、‘J’、‘K’、‘L’、‘S’、‘T’、‘U’、‘V’、‘W’、‘X’、‘Y’、‘Z’、‘A’、‘B’、‘C’、‘D’、‘F’、‘F’//显示四位数的验证码for(var I=0；i4；I){ var x=20 20 * I；var y=20 10 *数学。random()；//console.log(x，y)；//在数组中获取到随机的索引整数var指数=数学。地板(数学。random()* arr。长度)；//通过随机的索引获取到随机的元素var texts=arr[index]；//设置验证码的相关样式blur.font='bold 20px微软雅黑；侠影。fill style=TextColor()；//画布旋转显示//翻译()方法重新映射画布上的位置blur.translate(x，y)；//将画布旋转，旋转角度，以弧度旋转（弧度=学位*数学/180)var deg=90 * Math。随机()*数学.PI/180；模糊。旋转（度);//blur.fillText(texts，0，0)；//将画布映射返回原来的位置模糊。旋转(-度);blur.translate(-x，-y)；} //制作验证码的干扰线制作for(var I=0；i6；我){模糊。begin path()；blur.moveTo(Math.random()*100，数学。random()* 40)；blur.lineTo(Math.random()*100，数学。random()* 40)；//设置干扰线的颜色侠影。stroke style=text color()；侠影。笔画()；} //制作验证码的干扰圆点for(var I=0；i20I){侠影。begin path()；var x=数学。random()* 100；var y=数学。random()* 100；blur.moveTo(x，y)；blur.lineTo(x 1，y 1)；//设置干扰线的颜色侠影。stroke style=text color()；侠影。笔画()；} } //获取随机颜色封装函数textColor(){ var red=math。地板(数学。random()* 256)；var green=数学。地板(数学。random()* 256)；var blue=数学。地板(数学。random()* 256)；返回“RGB(’红色'、'绿色'、'蓝色')";} /script/html x要清除的矩形左上角的x坐标y要清除的矩形左上角的y坐标宽度要清除的矩形的宽度，以像素计高度要清除的矩形的高度，以像素计以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。