欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年12月05日 10:00:51   作者：匿名的girl  
這篇文章主要介紹了JS+HTML5 canvas繪制驗(yàn)證碼,結(jié)合實(shí)例形式分析了HTML5 canvas圖形繪制相關(guān)操作技巧,需要的朋友可以參考下

本文實(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},$)`;
}
//填充的背景
  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.jb51.net/code/WebCodeRun，測試上述代碼運(yùn)行效果。

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

<!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>www.dbjr.com.cn 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},$)`;
}
//填充的背景
  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é)果如下：

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼

    JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼

    這篇文章主要介紹了JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過顯示大圖標(biāo)功能,涉及javascript鼠標(biāo)事件及頁面元素遍歷并修改屬性的技巧,需要的朋友可以參考下
    2015-08-08
  • 微信小程序?qū)崿F(xiàn)漸入漸出動(dòng)畫效果

    微信小程序?qū)崿F(xiàn)漸入漸出動(dòng)畫效果

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)漸入漸出動(dòng)畫效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • Google (Local) Search API的簡單使用介紹

    Google (Local) Search API的簡單使用介紹

    這篇文章主要介紹了Google (Local) Search API的簡單使用。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
    2013-11-11
  • JS中作用域和變量提升(hoisting)的深入理解

    JS中作用域和變量提升(hoisting)的深入理解

    相信大家也都發(fā)現(xiàn)了，在網(wǎng)上關(guān)于JS的變量和作用域的文章有很多，但真正能講清楚，能深入理解的文章很少。在閱讀了很多人的文章以后，我決定綜合起來，結(jié)合實(shí)際代碼，希望能夠以一個(gè)比較清楚完整的方式讓大家真正理解。有需要的朋友們下面來一起看看吧。
    2016-10-10
  • js獲取url傳值的方法

    js獲取url傳值的方法

    這篇文章主要介紹了js獲取url傳值的方法,實(shí)例分析了字符串分割與正則分析兩種方法,并補(bǔ)充了一個(gè)基于正則匹配實(shí)現(xiàn)的js獲取url的get傳值函數(shù),需要的朋友可以參考下
    2015-12-12
  • 微信小程序?qū)崿F(xiàn)pdf、word等格式文件上傳的方法

    微信小程序?qū)崿F(xiàn)pdf、word等格式文件上傳的方法

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)pdf,word等格式文件上傳的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-09-09
  • JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性

    JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性

    這篇文章主要介紹了JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性的相關(guān)資料,需要的朋友可以參考下
    2017-07-07
  • echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例

    echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例

    這篇文章主要給大家介紹了關(guān)于echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的幫助，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-07-07
  • JavaScript中scrollTo()無效問題處理辦法

    JavaScript中scrollTo()無效問題處理辦法

    這篇文章主要給大家介紹了關(guān)于JavaScript中scrollTo()無效問題處理辦法,scrollTo()方法將文檔滾動(dòng)到指定的坐標(biāo),如需使 scrollTo()方法起作用,文檔必須大于屏幕,并且滾動(dòng)條必須可見,需要的朋友可以參考下
    2024-01-01
  • three.js?Mool3D模型類的使用

    three.js?Mool3D模型類的使用

    這篇文章主要為大家介紹了three.js?Mool3D模型類的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03

最新評(píng)論