canvas繪製隨機驗證碼

效果圖：

思路：

1, 繪製canvas畫布，進行基礎設置

2.繪製一個矩形

3.設置驗證碼的隨機數

4.設置驗證碼隨機數的隨機顏色

5.繪製隨機干擾線

6,繪製隨機干擾點

經過以上六個步驟，驗證碼的雛形就做好了

7.旋轉驗證碼中的隨機數（這部分在章節內詳細說明）

8.重新獲取驗證碼

 縷清思路，然後一步步操作

1.進行canvas的基礎操作

（1）在html中定義畫布

1  <canvas id="canvas"></canvas>

（2）js定義

1  window.onload = function(){
2  　　var canvas = document.getElementById("canvas"); //獲取到canvas對象
3 　　 var context = canvas.getContext("2d"); //獲取到canvas繪圖環境
4      //設置畫布大小
5      canvas.width = 120;
6      canvas.height = 40;
7 };

2.繪製矩形

context.strokeRect(0,0,120,40);

3.設置驗證碼的隨機數

（1）定義一個數組存放驗證碼的隨機數，我設置了數字和小寫字母

 var aCode = [0,1,2,3,4,5,6,7,8,9,'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'];

（2）設置驗證碼的隨機數

for(var i = 0; i < 4; i ++){
    var x = 20 + i * 20;
    var y = 10 + Math.random() * 10;
    var index = Math.floor(Math.random()*aCode.length); //獲取到一個隨機的索引值
    var txt = aCode[index]; //獲取到數組裡面的隨機的內容
    context.font = "bold 20px 微軟雅黑"; //設置文字樣式
    context.fillText(txt,x,y);
}

4.設置驗證碼隨機數的隨機顏色

（1）通過以上步驟可以看到已經出現了隨機數，接下來需要設置隨機數的隨機顏色

　　　　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){
                r = 0;
                g = 0;
                b = 0;
            }
            return "rgb("+r+","+g+","+b+")";
        }

（2）然後再將隨機顏色加進去

 context.fillStyle = getColor();

5.設置隨機干擾線

//繪製干擾線
            for(var i = 0; i < 8; i ++ ){
                context.strokeStyle = getColor();
                context.beginPath();
                context.moveTo(Math.random()*120,Math.random()*40);
                context.lineTo(Math.random()*120,Math.random()*40);
                context.stroke();
            }

6,繪製隨機干擾點

干擾點和干擾線的原理是一樣的，干擾點可以看成很小的干擾線

//繪製干擾點
            for(var i = 0;i <20 ;i ++){
                var x = Math.random() *120;
                var y = Math.random() *40;
                context.strokeStyle = getColor();
                context.beginPath();
                context.moveTo( x,y);
                context.lineTo(x+1,y+1);
                context.stroke();
            }

7.旋轉驗證碼中的隨機數

因為canvas是一個畫布，所以canvas中的內容只是“畫”中的一部分，不能單獨旋轉，這裡旋轉的原理是每當繪製一個數字的之前將畫布移動到相應數字的x,y的點，然後以點進行旋轉，旋轉好以後，繪製隨機數，最後將畫布還原到原來的位置進行下一個隨機數的繪製

 //產生隨機數
            for(var i = 0; i < 4; i ++){
                var deg = Math.random() * 180 * Math.PI / 180;
                var x = 20 + i * 20;
                var y = 10 + Math.random() * 10;
                var index = Math.floor(Math.random()*aCode.length); //獲取到一個隨機的索引值
                var txt = aCode[index]; //獲取到數組裡面的隨機的內容
                context.font = "bold 20px 微軟雅黑"; //設置文字樣式
                context.fillStyle = getColor();
                context.translate(x,y);
                context.rotate(deg);
                context.fillText(txt,0,0);
                context.rotate(-deg);
                context.translate(-x,-y);

            }

8.重新獲取驗證碼

重新獲取驗證碼需要在body中添加一個點擊事件

 <a onclick="refresh()">重新獲取</a>

然後將繪製隨機數的代碼封裝成一個方法，我這裡方法為draw()，canvas的刷新需要重新定義畫布

　　　　function refresh(){
            var canvas = document.getElementById("canvas"); //獲取到canvas對象
            var context = canvas.getContext("2d"); //獲取到canvas繪圖環境
            draw(canvas,context);
        }

註：騰訊課堂視頻小結