注意：
真正項目中驗證碼圖片都是由服務器端(PHP、JSP、Node.js)技術來生成。
最終效果：
代碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } canvas { background: #ddd; } </style> </head> <body> <h3>驗證碼圖片</h3> <canvas id="c9"></canvas> <script> var cw = 120; //畫布的總寬度 var ch = 30; //畫布的總高度 c9.width = cw; c9.height = ch; var ctx = c9.getContext('2d'); /**1.繪制背景顏色——填充矩形**/ ctx.fillStyle = rc(150, 230); ctx.fillRect(0, 0, cw, ch); /**2.循環繪制4個隨機字符**/ ctx.textBaseline = 'top'; var pool = 'ABCDEFGHJKLMNPQRSTUVWXY3456789'; for (var i = 0; i < 4; i++) { var c = pool[rn(0, pool.length)];//一個隨機字符 var fs = rn(10, 40); //字體大小 ctx.font = fs + 'px SimHei'; var fc = rc(50, 150); //字體顏色 ctx.strokeStyle = fc; var deg = rn(-45, 45);//旋轉角度 var x = -fs / 2; //每個字符左上角的坐標 var y = -fs / 2; //繪制一個字符: 保存狀態->平移->旋轉->繪制->恢復狀態 ctx.save(); ctx.translate(30*i+15, 15); ctx.rotate(deg*Math.PI/180); ctx.strokeText(c, x, y); ctx.restore(); } /**3.繪制5條干擾線——直線路徑**/ for(var i=0; i<5; i++){ ctx.beginPath(); ctx.moveTo(rn(0,cw), rn(0, ch)); ctx.lineTo(rn(0,cw), rn(0, ch)); ctx.strokeStyle = rc(0, 255); ctx.stroke(); } /**4.繪制50個雜色點——半徑為0.5圓形路徑**/ for(var i=0; i<50; i++){ ctx.beginPath(); ctx.arc(rn(0,cw), rn(0, ch),0.5, 0, 2*Math.PI); ctx.fillStyle = rc(0, 255); ctx.fill(); } //random number，返回指定范圍內的隨機整數 function rn(min, max) { return Math.floor(Math.random() * (max - min) + min); } //random color，返回指定范圍內的隨機顏色 function rc(min, max) { var r = rn(min, max); var g = rn(min, max); var b = rn(min, max); return `rgb(${r}, ${g}, ${b})`; } </script> </body> </html>