Canvas入門實戰(zhàn)之怎么實現(xiàn)一個圖形驗證碼
這篇文章主要介紹“Canvas入門實戰(zhàn)之怎么實現(xiàn)一個圖形驗證碼”，在日常操作中，相信很多人在Canvas入門實戰(zhàn)之怎么實現(xiàn)一個圖形驗證碼問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Canvas入門實戰(zhàn)之怎么實現(xiàn)一個圖形驗證碼”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
公司主營業(yè)務：成都網站制作、成都網站設計、外貿營銷網站建設、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出民和免費做網站回饋大家。
你將收獲
閉包的使用
canvas常用api的使用
javascript面向對象的實現(xiàn)方式
實現(xiàn)一個canvas的圖形驗證碼的一般思路和常用算法
設計思路
用canvas生成畫布
用canvas畫干擾線或躁點
生成隨機不重復的n的字母
用canvas繪制文字
初始化和canvas點擊事件
組件化封裝
文末將附上組件封裝的源碼，歡迎大家隨時溝通交流。關于項目的打包，我將使用自己基于gulp4搭建的9012教你如何使用gulp4開發(fā)項目腳手架。
效果預覽
實現(xiàn)思路
我將按照上文中的設計思路的步驟一步步實現(xiàn)，首先我們先定義一個es5類：
function Gcode(el, option) { this.el = typeof el === 'string' ? document.querySelector(el) : el; this.option = option; this.init(); }其中init是用來初始化用的，參數(shù)el代表需要掛載的元素或元素id，option為傳入的可選項，稍后會在代碼中體現(xiàn)，通常這也是面向對象的常用套路。
1.繪制畫布
Gcode.prototype = { constructor: Gcode, init: function() { if(this.el.getContext) { isSupportCanvas = true; var ctx = this.el.getContext('2d'), // 設置畫布寬高 cw = this.el.width = this.option.width || 200, ch = this.el.height = this.option.height || 40; } } }這里我們在初始化方法中先定義一個canvas畫布，寬高為用戶自定義的寬高，默認為200*40。
2.繪制干擾線
// 畫干擾線 drawLine: function(ctx, lineNum, maxW, maxH) { ctx.clearRect(0, 0, maxW, maxH); for(var i=0; i < lineNum; i++) { var dx1 = Math.random()* maxW, dy1 = Math.random()* maxH, dx2 = Math.random()* maxW, dy2 = Math.random()* maxH; ctx.strokeStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; ctx.beginPath(); ctx.moveTo(dx1, dy1); ctx.lineTo(dx2, dy2); ctx.stroke(); } }這里我們對類Gcode定義原型方法drawLine，然后通過for循環(huán)繪制隨機位置的線條，為了讓canvas每次點擊能清空之前的干擾線，我們使用clearRect來清除畫布。
3.生成隨機不重復的n個字符
我們通過遞歸實現(xiàn)，如下==：
// 生成唯一文字 generateUniqueText: function(source, hasList, limit) { var text = source[Math.floor(Math.random()*limit)]; if(hasList.indexOf(text) > -1) { return this.generateUniqueText(source, hasList, limit) }else { return text } } // 生成指定個數(shù)的隨機文字 randomText: function(len) { var source = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; var result = []; var sourceLen = source.length; for(var i=0; i< len; i++) { var text = this.generateUniqueText(source, result, sourceLen); result.push(text) } return result.join('') }我們通過定義一個字母表，傳入生成的隨機字母的個數(shù)，配合generateUniqueText來實現(xiàn)生成唯一不重復的n個隨機字符。當然筆者認為這個方法并不優(yōu)雅，你也可以使用uuid的方式或者更好的方式，歡迎隨時和筆者交流。
4.用canvas繪制文字
// 畫文字 drawText: function(ctx, text, maxH) { var len = text.length; for(var i=0; i < len; i++) { var dx = 30 * Math.random() + 30* i, dy = Math.random()* 5 + maxH/2; ctx.fillStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; ctx.font = '30px Helvetica'; ctx.textBaseline = 'middle'; ctx.fillText(text[i], dx, dy); } },這里和上文畫線實現(xiàn)類似。就不做過多介紹了。
5.初始化和canvas點擊事件
接下來我們看看完整的初始化代碼：
init: function() { if(this.el.getContext) { isSupportCanvas = true; var ctx = this.el.getContext('2d'), // 設置畫布寬高 cw = this.el.width = this.option.width || 200, ch = this.el.height = this.option.height || 40, textLen = this.option.textLen || 4, lineNum = this.option.lineNum || 4; var text = this.randomText(textLen); this.onClick(ctx, textLen, lineNum, cw, ch); this.drawLine(ctx, lineNum, cw, ch); this.drawText(ctx, text, ch); } }點擊事件主要是為了用戶點擊可以切換驗證碼：
onClick: function(ctx, textLen, lineNum, cw, ch) { var _ = this; this.el.addEventListener('click', function(){ text = _.randomText(textLen); _.drawLine(ctx, lineNum, cw, ch); _.drawText(ctx, text, ch); }, false) }到此，一個完整的驗證碼組件實現(xiàn)完成，怎么用呢?如下：
new Gcode('#canvas_code', { lineNum: 6, // 可選 textLen: 4, // 可選 width: 200, // 可選 height: 50 // 可選 })完整代碼如下，歡迎學習交流：
// canvas繪制圖形驗證碼 (function(){ function Gcode(el, option) { this.el = typeof el === 'string' ? document.querySelector(el) : el; this.option = option; this.init(); } Gcode.prototype = { constructor: Gcode, init: function() { if(this.el.getContext) { isSupportCanvas = true; var ctx = this.el.getContext('2d'), // 設置畫布寬高 cw = this.el.width = this.option.width || 200, ch = this.el.height = this.option.height || 40, textLen = this.option.textLen || 4, lineNum = this.option.lineNum || 4; var text = this.randomText(textLen); this.onClick(ctx, textLen, lineNum, cw, ch); this.drawLine(ctx, lineNum, cw, ch); this.drawText(ctx, text, ch); } }, onClick: function(ctx, textLen, lineNum, cw, ch) { var _ = this; this.el.addEventListener('click', function(){ text = _.randomText(textLen); _.drawLine(ctx, lineNum, cw, ch); _.drawText(ctx, text, ch); }, false) }, // 畫干擾線 drawLine: function(ctx, lineNum, maxW, maxH) { ctx.clearRect(0, 0, maxW, maxH); for(var i=0; i < lineNum; i++) { var dx1 = Math.random()* maxW, dy1 = Math.random()* maxH, dx2 = Math.random()* maxW, dy2 = Math.random()* maxH; ctx.strokeStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; ctx.beginPath(); ctx.moveTo(dx1, dy1); ctx.lineTo(dx2, dy2); ctx.stroke(); } }, // 畫文字 drawText: function(ctx, text, maxH) { var len = text.length; for(var i=0; i < len; i++) { var dx = 30 * Math.random() + 30* i, dy = Math.random()* 5 + maxH/2; ctx.fillStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; ctx.font = '30px Helvetica'; ctx.textBaseline = 'middle'; ctx.fillText(text[i], dx, dy); } }, // 生成指定個數(shù)的隨機文字 randomText: function(len) { var source = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; var result = []; var sourceLen = source.length; for(var i=0; i< len; i++) { var text = this.generateUniqueText(source, result, sourceLen); result.push(text) } return result.join('') }, // 生成唯一文字 generateUniqueText: function(source, hasList, limit) { var text = source[Math.floor(Math.random()*limit)]; if(hasList.indexOf(text) > -1) { return this.generateUniqueText(source, hasList, limit) }else { return text } } } new Gcode('#canvas_code', { lineNum: 6 }) })();到此，關于“Canvas入門實戰(zhàn)之怎么實現(xiàn)一個圖形驗證碼”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網頁名稱：Canvas入門實戰(zhàn)之怎么實現(xiàn)一個圖形驗證碼
本文來源：http://www.muchs.cn/article42/jpcdhc.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、面包屑導航、品牌網站建設、全網營銷推廣、靜態(tài)網站、動態(tài)網站
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 網站關鍵詞優(yōu)化不穩(wěn)定的原因有哪些？ 2022-12-17
- SEOer們需關注的長尾關鍵詞優(yōu)化最佳方法 2021-08-22
- 網站關鍵詞優(yōu)化不好可能造成的原因解析 2022-07-13
- 大中型網站的關鍵詞優(yōu)化策略：熱門還是長尾 2021-09-30
- 網站關鍵詞優(yōu)化的關鍵點 2022-05-28
- 闡述：關鍵詞優(yōu)化競爭強度與網站優(yōu)化價格的聯(lián)系 2022-09-24
- 品牌關鍵詞優(yōu)化的作用是什么？ 2015-07-18
- 怎么做網站關鍵詞優(yōu)化 2021-09-19
- SEO關鍵詞優(yōu)化的四個技巧 2014-01-27
- 熱門關鍵詞優(yōu)化無效原因猜測？ 2022-05-26
- 【網站優(yōu)化】百度關鍵詞優(yōu)化7天上首頁真的靠譜嗎? 2022-05-09
- 網站長尾關鍵詞優(yōu)化有何作用？ 2023-04-11