[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> ```