[TOC] # 1.为什么要有验证码？  # 2.了解canvas http://www.w3school.com.cn/html5/html_5_canvas.asp ``` <canvas id="canvas" width="120" height="50"></canvas> ``` # 3.开始在js中添加相应的代码 ## 第一步：JavaScript 使用 id 来寻找 canvas 元素，创建 context 对象，并在画布中添加四个文字 讲解1：context后面加坐标，都是以canvas的左上角做为圆心  讲解2： var index = Math.floor(Math.random() * aCode.length);//产生随机的索引值 **Math.random()**：获取0~1之间的随机数，不包括0和1，就是有小数 **aCode.length**：aCode这个数组的宽度 **Math.random() * aCode.length**：就是下标0~36之间的随机数 **Math.floor**：向下取整  ``` window.onload = function () { var canvas = document.getElementById("canvas")//演员 var context = canvas.getContext("2d");//获取绘图环境，演员表演的舞台 context.strokeRect(0, 0, 120, 40);//绘制一个矩形框，context后面加坐标，都是以canvas的左上角做为圆心 var sCode = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,0,1,2,3,4,5,6,7,8,9"; var aCode = sCode.split(","); //字符串变成数组 for (var i = 0; i < 4; i++) { var x = 20 + 20 * i;//2.四个文字的间隔宽 var y = 10 + Math.random() * 20; var index = Math.floor(Math.random() * aCode.length);//1.产生随机的索引值 var s = aCode[index]; context.font = "bold 20px 微软雅黑"; context.fillStyle = getColor(); context.fillText(s, x, y); } } ``` ## 第二步：定义一个函数给文字上色 ``` function getColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); //如果随机产生白色字体就默认将白色设为黑色 if(r==255&g==255&b==255){ return rgb(0,0,0); }else{ return "rgb(" + r + "," + g + "," + b + ")"; } } ``` ## 第三步：制作线与点 ``` // 制作线 for (var i = 0; i < 8; i++) { context.beginPath();//声明开始一个路径 context.moveTo(Math.random() * 120, Math.random() * 40);//起点 context.lineTo(Math.random() * 120, Math.random() * 40);//终点 context.strokeStyle = getColor();//颜色 context.stroke();//制作绘制 } // 制作点 for (var i = 0; i < 30; i++) { context.beginPath();//声明开始一个路径 var x = Math.random() * 120; var y = Math.random() * 40; context.moveTo(x, y); context.lineTo(x + 1, y + 1); context.strokeStyle = getColor();//颜色 context.stroke();//制作绘制 } ``` ## 第四步：字体旋转 注意：字无法旋转，只有canvas可以旋转 ``` window.onload = function () { var canvas = document.getElementById("canvas")//演员 var context = canvas.getContext("2d");//获取绘图环境，演员表演的舞台 context.strokeRect(0, 0, 120, 40);//绘制一个矩形框，context后面加坐标，都是以canvas的左上角做为圆心 var sCode = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,0,1,2,3,4,5,6,7,8,9"; var aCode = sCode.split(","); for (var i = 0; i < 4; i++) { var x = 20 + 20 * i;//四个文字的间隔宽 var y = 10 + Math.random() * 10; var index = Math.floor(Math.random() * aCode.length);//产生随机的索引值 var s = aCode[index]; context.font = "bold 20px 微软雅黑"; context.fillStyle = getColor(); // context.fillText(s, x, y); //下面开始制作旋转 var deg = 120 * Math.random() * Math.PI / 180; //旋转的单位是弧度，不是度数，120是怕旋转的太厉害，可修改值 context.translate(x, y);//让canvas移动 context.rotate(deg);//让canvas旋转 context.fillText(s, 0, 0);//在旋转后的canvas的左上角写内容 context.rotate(-deg);//归位 context.translate(-x, -y)//归位 } // 制作线 for (var i = 0; i < 8; i++) { context.beginPath();//声明开始一个路径 context.moveTo(Math.random() * 120, Math.random() * 40);//起点 context.lineTo(Math.random() * 120, Math.random() * 40);//终点 context.strokeStyle = getColor();//颜色 context.stroke();//制作绘制 } } ``` ## 第五步：封装到一个draw方法内，并给一个图片的点击事件 ``` <script> //产生随机的颜色值 function getColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); //如果随机产生白色字体就默认将白色设为黑色 if(r==255&g==255&b==255){ return rgb(0,0,0); }else{ return "rgb(" + r + "," + g + "," + b + ")"; } } var canvas, context; //设在方法里面是个局部变量，设在外面是个全局变量，为了避免无法掉到canvas，context window.onload = function () { draw(); document.getElementById("canvas").onclick = function () { context.clearRect(0, 0, 120, 40);//清掉canvas draw(); } } function draw() { canvas = document.getElementById("canvas"); //演员 context = canvas.getContext("2d"); //演员表演的舞台 context.strokeRect(0, 0, 120, 40); var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,0,1,2,3,4,5,6,7,8,9"; var aCode = sCode.split(",");//字符串变成数组 for (var i = 0; i < 4; i++) { var x = 20 + 20 * i; //让四个文字的x轴间距20 var y = 20 + Math.random() * 10;//让四个文字的y轴在20~30之间随机取值 var index = Math.floor(Math.random() * aCode.length); //产生随机的索引值 var s = aCode[index]; context.font = "bold 20px 微软雅黑"; context.fillStyle = getColor(); var deg = 120 * Math.random() * Math.PI / 180; context.translate(x, y); //让canvas移动 context.rotate(deg);//让canvas旋转 context.fillText(s, 0, 0); //在旋转后的canvas的左上角写内容 context.rotate(-deg);//归为 context.translate(-x, -y);//归为 } for (var i = 0; i < 8; i++) { context.beginPath();//声明开始一个路径 context.moveTo(Math.random() * 120, Math.random() * 40);//起点 context.lineTo(Math.random() * 120, Math.random() * 40);//终点 context.strokeStyle = getColor();//随机颜色 context.stroke();//执行绘制 } for (var i = 0; i < 30; i++) { context.beginPath(); var x = Math.random() * 120; var y = Math.random() * 40; context.moveTo(x, y); context.lineTo(x + 1, y + 1); context.strokeStyle = getColor(); context.stroke(); } } </script> ```