看到人家彩色背景的驗證碼想測試一下：

創建html代碼：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;box-sizing: border-box;">您的瀏覽器不支持 HTML5 canvas 標簽。 </canvas>

創建相同js代碼：

　　function color(){var c1 = parseInt(Math.random()*10);var c2 = parseInt(Math.random()*10);var c3 = parseInt(Math.random()*10);var c4 = parseInt(Math.random()*10);var c5 = parseInt(Math.random()*10); var c6 = parseInt(Math.random()*10); return "#" + c1+ c2+ c3+ c4+ c5+ c6;　　//創建隨機顏色 } function random(){ var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle='#000'; ctx.fillRect(0,0,200,100); //這兩句代碼加上就不會出現重疊的情況？ 不懂···· for(var i = 0;i< 30;i++){ ctx.beginPath(); ctx.arc(parseInt(Math.random()*220),parseInt(Math.random()*110),3,0,2*Math.PI); ctx.fillStyle= color(); ctx.stroke(); ctx.fill(); //隨便創建了一些五彩小圓點 } // 創建漸變 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充漸變 ctx.fillStyle=grd; ctx.font="30px Arial"; var rans = rand(); //創建了驗證碼 ctx.fillText(rans,50,50); //實體 console.log(rans) //方便做判斷或者其他 } random(); myCanvas.onclick = function(e){ //點擊事件 觸發 可以自定義元素 e.preventDefault(); random() }

1.先試用笨方法生成隨機數字驗證碼：

創建數字：

function rand(){var num1 = parseInt(Math.random()*10);var num2 = parseInt(Math.random()*10);var num3 = parseInt(Math.random()*10);var num4 = parseInt(Math.random()*10);return num1 + " " +num2 + " " + num3+ " " + num4; //如果驗證碼不是純數字呢？ }

2.帶有大小寫字母 的隨機驗證碼：

function rand(){var str = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"var arr = str.split("");var sM = arr[Math.floor(Math.random()*arr.length)];var ss = "";　　//定義一個變量存放 隨機驗證碼的字符for(var i = 0;i< 4;i++){ //可以自定義幾位驗證碼var sM = arr[Math.floor(Math.random()*arr.length)];ss +=sM; 　　//重新定義了一下隨機數字 防止重復 }return ss;}

實現效果如下：

轉載于:https://www.cnblogs.com/CooLLYP/p/6928607.html

總結

以上是生活随笔為你收集整理的canvas制作随机验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。