canvas基礎(chǔ)之圖形驗證碼的示例
發(fā)布時間：2018-01-02 14:38:51 作者：shizhuanzhi 
我要評論
我要評論這篇文章主要介紹了canvas基礎(chǔ)之圖形驗證碼的示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在通常的登錄界面我們都可以看到驗證碼，驗證碼的作用是檢測是不是人在操作，防止機(jī)器等非人操作，防止數(shù)據(jù)庫被輕而易舉的攻破。
驗證碼一般用PHP和java等后端語言編寫；
但是在前端，用canva或者SVG也可以繪制驗證碼；
直接上干貨：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="100" height="40">
您的瀏覽器不支持canvas
</canvas>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
//隨機(jī)字符（透明度）（大小隨機(jī)，位置隨機(jī)）；
var strStore = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
//隨機(jī)函數(shù)
function roundNum(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//文字內(nèi)容部分：
var str = "";
for(var i = 0; i < 5; i++) {
context.beginPath();
//隨機(jī)顏色（淺色：RGB - 200~250）
var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`;
context.fillStyle = color;
context.font = roundNum(20,30)+"px Arial";
context.textAlign = "center";
str = strStore[roundNum(0,strStore.length)];
context.fillText(str, 10 + 18 * i, roundNum(20,35));
}
//10個左右的隨機(jī)（長度隨機(jī)，位置隨機(jī)），干擾線
for(var j = 0; j < roundNum(5, 10); j++) {
context.beginPath();
var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`;
context.strokeStyle = color;
context.moveTo(roundNum(0, 100), roundNum(0, 40));
context.lineTo(roundNum(0, 100), roundNum(0, 40));
context.stroke();
}
//干擾項：10個左右的隨機(jī)（半徑隨機(jī)，位置隨機(jī)），干擾圓
for(var j = 0; j < roundNum(5, 10); j++) {
context.beginPath();
context.fillStyle = color;
context.arc(roundNum(0, 100), roundNum(0, 40), roundNum(0, 5), Math.PI * 2 / (roundNum(1, 360)), Math.PI * 2 / (roundNum(1, 360)));
context.fill();
}
</script>
</html>
結(jié)果如圖：
至于要拿來咋用，就看大家高興了。想怎么整這么整。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了用canvas顯示驗證碼的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-10利用html5 canvas破解簡單驗證碼及getImageData接口應(yīng)用
：HTML 5中的canvas有個接口getImageData可以用來從驗證碼圖像中取得像素數(shù)據(jù)。每一個像素有對應(yīng)r,g,b,a四個值，r,g,b是紅綠藍(lán)三色，a是透明度;觀察了一下，接下來說下思路2013-01-25- 這篇文章主要介紹了canvas實現(xiàn)滑動驗證的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-08-11
