JS+HTML5 canvas繪制驗(yàn)證碼示例

2019-11-19 12:24:24

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了JS+HTML5 canvas繪制驗(yàn)證碼。分享給大家供大家參考，具體如下：

css樣式：

<style>body{  text-align: center;}canvas{  background:#ddd;}</style>

HTML部分：

body中添加標(biāo)簽canvas：

<canvas id="c3"></canvas>

js部分：

//創(chuàng)建兩個(gè)變量保存驗(yàn)證碼的寬度和高度  var w = 120;  var h = 30;//將變量值賦值給canvas  c3.width = w;  c3.height = h;//獲取畫筆  var ctx = c3.getContext("2d");//創(chuàng)建兩個(gè)函數(shù)，返回指定范圍內(nèi)的隨機(jī)數(shù)，隨機(jī)顏色//隨機(jī)數(shù)  function rn(min,max){    var n = Math.random()*(max-min)+min;    return Math.floor(n);  }//隨機(jī)顏色  function rc(min,max){    var r = rn(min,max);    var g = rn(min,max);    var b = rn(min,max);    return `rgb(${r},${g},${b})`;}//填充的背景  ctx.fillStyle=rc(180,230);  ctx.fillRect(0,0,w,h);//創(chuàng)建一個(gè)隨機(jī)的文字[字母和數(shù)字]4個(gè)  var pool = "ABCDEFGHIJKabced胡歌0123456789哈哼哈哈";  var str ="";  for(var i = 0;i<4;i++){    var index = Math.floor(Math.random()*pool.length);    str +=pool[index];}//console.log(str);  ctx.font = "30px SimHei";  ctx.fillStyle = rc(80,180);//文字顏色  ctx.textBaseline="top";  ctx.fillText(str,20,0);//在（20,0）處開始填充文字//繪制6條干擾線  for(var i = 0;i<6;i++){    ctx.strokeStyle = rc(0,255);    ctx.beginPath();    ctx.moveTo(rn(0,w),rn(0,h));    ctx.lineTo(rn(0,w),rn(0,h));    ctx.stroke();  }//繪制50個(gè)干擾點(diǎn)  for(var i = 0;i<50;i++){    ctx.fillStyle = rc(0,255);    ctx.beginPath();    ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);    ctx.fill();  }

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.VeVB.COm/code/WebCodeRun，測(cè)試上述代碼運(yùn)行效果。

或者使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.VeVB.COm/code/HtmlJsRun，測(cè)試如下完整示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>m.survivalescaperooms.com canvas繪制驗(yàn)證碼</title><style>body{  text-align: center;}canvas{  background:#ddd;}</style></head><body><canvas id="c3"></canvas><script>//創(chuàng)建兩個(gè)變量保存驗(yàn)證碼的寬度和高度  var w = 120;  var h = 30;//將變量值賦值給canvas  c3.width = w;  c3.height = h;//獲取畫筆  var ctx = c3.getContext("2d");//創(chuàng)建兩個(gè)函數(shù)，返回指定范圍內(nèi)的隨機(jī)數(shù)，隨機(jī)顏色//隨機(jī)數(shù)  function rn(min,max){    var n = Math.random()*(max-min)+min;    return Math.floor(n);  }//隨機(jī)顏色  function rc(min,max){    var r = rn(min,max);    var g = rn(min,max);    var b = rn(min,max);    return `rgb(${r},${g},${b})`;}//填充的背景  ctx.fillStyle=rc(180,230);  ctx.fillRect(0,0,w,h);//創(chuàng)建一個(gè)隨機(jī)的文字[字母和數(shù)字]4個(gè)  var pool = "ABCDEFGHIJKabced胡歌0123456789哈哼哈哈";  var str ="";  for(var i = 0;i<4;i++){    var index = Math.floor(Math.random()*pool.length);    str +=pool[index];}//console.log(str);  ctx.font = "30px SimHei";  ctx.fillStyle = rc(80,180);//文字顏色  ctx.textBaseline="top";  ctx.fillText(str,20,0);//在（20,0）處開始填充文字//繪制6條干擾線  for(var i = 0;i<6;i++){    ctx.strokeStyle = rc(0,255);    ctx.beginPath();    ctx.moveTo(rn(0,w),rn(0,h));    ctx.lineTo(rn(0,w),rn(0,h));    ctx.stroke();  }//繪制50個(gè)干擾點(diǎn)  for(var i = 0;i<50;i++){    ctx.fillStyle = rc(0,255);    ctx.beginPath();    ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);    ctx.fill();  }</script></body></html>

運(yùn)行結(jié)果如下：