原生javascript 製作canvas 驗證碼

標籤：顏色   otto   角度   文本   click   blog   text   mat   文字   

<canvas id="canvas" width="120" height="40"></canvas>        <a href="#" id="changeImg">看不清，換一張</a>        <script>            /**產生一個隨機數**/            function randomNum(min, max) {                return Math.floor(Math.random() * (max - min) + min);            }            /**產生一個隨機色**/            function randomColor(min, max) {                var r = randomNum(min, max);                var g = randomNum(min, max);                var b = randomNum(min, max);                return "rgb(" + r + "," + g + "," + b + ")";            }            drawPic();            document.getElementById("changeImg").onclick = function(e) {                e.preventDefault();                drawPic();            }            /**繪製驗證碼圖片**/            function drawPic() {                var canvas = document.getElementById("canvas");                var width = canvas.width;                var height = canvas.height;                var ctx = canvas.getContext(‘2d‘);                ctx.textBaseline = ‘bottom‘;  //文本對齊                /**繪製背景色**/                ctx.fillStyle = randomColor(180, 240); //顏色若太深可能導致看不清                ctx.fillRect(0, 0, width, height);                /**繪製文字**/                var str = ‘ABCEFGHIJKLMNOPQRSTUVWXYZ123456789‘;                for(var i = 0; i < 4; i++) {                    var txt = str[randomNum(0, str.length)];                    ctx.fillStyle = randomColor(50, 160); //隨機產生字型顏色                    ctx.font = randomNum(30, 50) + ‘px SimHei‘; //隨機產生字型大小                    var x = 10 + i * 25;                    var y = randomNum(25, 45);                    var deg = randomNum(-45, 45);                    //修改座標原點和旋轉角度                    ctx.translate(x, y);                    ctx.rotate(deg * Math.PI / 180);                    ctx.fillText(txt, 0, 0);                    //恢複座標原點和旋轉角度                    ctx.rotate(-deg * Math.PI / 180);                    ctx.translate(-x, -y);                }                /**繪製幹擾線**/                for(var i = 0; i < 8; i++) {                    ctx.strokeStyle = randomColor(40, 180);                    ctx.beginPath();                    ctx.moveTo(randomNum(0, width), randomNum(0, height));                    ctx.lineTo(randomNum(0, width), randomNum(0, height));                    ctx.stroke();                }                /**繪製幹擾點**/                for(var i = 0; i < 100; i++) {                    ctx.fillStyle = randomColor(0, 255);                    ctx.beginPath();                    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);                    ctx.fill();                }            }        </script>

網上好多都是外掛程式，希望這個對你們有用。謝謝。

原生javascript 製作canvas 驗證碼