Canvas入門實戰之用javascript面向對象實現一個圖形驗證碼
本文主要介紹用canvas實現圖形驗證碼的一些思路以及如何用javascript面向對象的方式更友好的實現canvas的功能，關於canvas的一些基本使用方法和API我整理了一個思惟導圖，你們感興趣的能夠參考學習。javascript
你將收穫
- 閉包的使用
- canvas經常使用api的使用
- javascript面向對象的實現方式
- 實現一個canvas的圖形驗證碼的通常思路和經常使用算法
設計思路
- 用canvas生成畫布
- 用canvas畫干擾線或躁點
- 生成隨機不重複的n的字母
- 用canvas繪製文字
- 初始化和canvas點擊事件
- 組件化封裝
文末將附上組件封裝的源碼，歡迎你們隨時溝通交流。關於項目的打包，我將使用本身基於gulp4搭建的9012教你如何使用gulp4開發項目腳手架。前端
效果預覽
實現思路
我將按照上文中的設計思路的步驟一步步實現，首先咱們先定義一個es5類：vue
function Gcode(el, option) {
this.el = typeof el === 'string' ? document.querySelector(el) : el;
this.option = option;
this.init();
}
複製代碼
其中init是用來初始化用的，參數el表明須要掛載的元素或元素id，option爲傳入的可選項，稍後會在代碼中體現，一般這也是面向對象的經常使用套路。java
- 繪製畫布
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。react
- 繪製干擾線
// 畫干擾線
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循環繪製隨機位置的線條，爲了讓canvas每次點擊能清空以前的干擾線，咱們使用clearRect來清除畫布。算法
- 生成隨機不重複的n個字符
咱們經過遞歸實現，以下==：vuex
// 生成惟一文字
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
}
}
// 生成指定個數的隨機文字
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來實現生成惟一不重複的n個隨機字符。固然筆者認爲這個方法並不優雅，你也可使用uuid的方式或者更好的方式，歡迎隨時和筆者交流。vue-cli
- 用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);
}
},
複製代碼
這裏和上文畫線實現相似。就不作過多介紹了。typescript
- 初始化和canvas點擊事件
接下來咱們看看完整的初始化代碼：gulp
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)
}
複製代碼
到此，一個完整的驗證碼組件實現完成，怎麼用呢？以下：
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);
}
},
// 生成指定個數的隨機文字
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,h5遊戲demo，能夠關注下方公衆號體驗哦
更多推薦
- 用 JavaScript 和 C3 實現一個轉盤小遊戲
- 教你用200行代碼寫一個愛豆拼拼樂H5小遊戲（附源碼）
- 基於react/vue生態的前端集成解決方案探索與總結
- 9012教你如何使用gulp4開發項目腳手架
- 如何用不到200行代碼寫一款屬於本身的js類庫)
- 讓你瞬間提升工做效率的經常使用js函數彙總(持續更新)
- 一張圖教你快速玩轉vue-cli3
- 3分鐘教你用原生js實現具備進度監聽的文件上傳預覽組件
- 3分鐘教你用原生js實現具備進度監聽的文件上傳預覽組件
- 使用Angular8和百度地圖api開發《旅遊清單》
- js基本搜索算法實現與170萬條數據下的性能測試
- 《前端算法系列》如何讓前端代碼速度提升60倍
- 《前端算法系列》數組去重
- vue高級進階系列——用typescript玩轉vue和vuex
- 前端三年，談談最值得讀的5本書籍
相關文章
- 1. web前端入門到實戰：實現圖形驗證碼
- 2. 圖形驗證碼實現
- 3. JavaScript面向對象入門
- 4. 面向對象實驗二 用況圖
- 5. 使用kbmmw 實現圖形驗證碼
- 6. JavaScript 面向對象實戰思想
- 7. JavaScript面向對象編程實戰
- 8. JavaScript基於對象引入，閉包，面向對象的實現
- 9. H5之 Canvas圖形實現
- 10. ASP.NET CORE 項目實戰 ---圖形驗證碼的實現
- 更多相關文章...
- • PHP 面向對象 - PHP教程
- • Lua 面向對象 - Lua 教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • Java Agent入門實戰（二）-Instrumentation源碼概述
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章