JSはどうやってランダム検証コードを生成しますか?
本論文の例では、JSがランダム検証コードを生成する具体的なコードを共有しています。
ウェブサイトでは様々な検証コードがよく見られます。今日はJSを使ってランダムな二次元コードを生成します。
私達はcanvasを使って検証コードの製作を行う必要があります。
キャンバスとは何ですか
HTML 5のcanvas元素はJavaScriptを使ってウェブページに画像を描きます。
キャンバスは長方形の領域です。各ピクセルをコントロールできます。
canvasは、複数の描画経路、矩形、円形、文字、および画像を追加する方法を有する。
考え方
私たちが作る二次元コードにはまずランダムな数字が必要です。次にランダムな位置が必要です。
HTML
ウェブサイトでは様々な検証コードがよく見られます。今日はJSを使ってランダムな二次元コードを生成します。
私達はcanvasを使って検証コードの製作を行う必要があります。
キャンバスとは何ですか
HTML 5のcanvas元素はJavaScriptを使ってウェブページに画像を描きます。
キャンバスは長方形の領域です。各ピクセルをコントロールできます。
canvasは、複数の描画経路、矩形、円形、文字、および画像を追加する方法を有する。
考え方
私たちが作る二次元コードにはまずランダムな数字が必要です。次にランダムな位置が必要です。
HTML
<canvas id="canvas" style="border: 1px solid red; width: 80px; height: 40px;">
</canvas>
JS
function getVerification() { //
var ctx = document.getElementById("canvas").getContext("2d");
//
ctx.clearRect(0,0, 400, 400);
//
ctx.font = "128px bold ";
//
ctx.textBaseline = "top";
//
ctx.fillStyle = randomColor();
// ( : ,x ,y )
ctx.fillText(getRandomNum(10), 0, getRandomNum(50));
ctx.fillStyle = randomColor();
ctx.fillText(getRandomNum(10), 50, getRandomNum(50));
ctx.fillStyle = randomColor();
ctx.fillText(getRandomNum(10), 100, getRandomNum(50));
ctx.fillStyle = randomColor();
ctx.fillText(getRandomNum(10), 150, getRandomNum(50));
}
私たちはctx.fillStyle=randomColorを使います。を選択します。ランダムな色を設定します。数字を書くごとに色を変えます。ランドムColoe()関数コードは以下の通りです。16進数の色コードをランダムに生成できます。
function randomColor() {
var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var colorArray = colorValue.split(",");
var color = "#";
for (var i = 0; i < 6; i++) {
color += colorArray[Math.floor(Math.random() * 16)];
}
return color;
}
GatRandomNum()を用いてランダムに表示された数字とランダムな各フォントのy軸方向の位置を取得した。認証コードの数字はそれぞれ取得します。到来したパラメータnは乱数範囲を決定する。コードは以下の通りです
function getRandomNum(n){
return parseInt(Math.random() * n);
}
完全コード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid red; width: 80px; height: 40px;"></canvas>
<span id="yanzhengma"></span><button onclick="getVerification()"> </button>
<script>
function randomColor() {
var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var colorArray = colorValue.split(",");
var color = "#";
for (var i = 0; i < 6; i++) {
color += colorArray[Math.floor(Math.random() * 16)];
}
return color;
}
function getRandomNum(n){
return parseInt(Math.random() * n);
}
function getVerification() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0,0, 400, 400);
//
ctx.font = "128px bold ";
//
ctx.textBaseline = "top";
//
ctx.fillStyle = randomColor();
// ( : ,x ,y )
ctx.fillText(getRandomNum(10), 0, getRandomNum(50));
ctx.fillStyle = randomColor();
ctx.fillText(getRandomNum(10), 50, getRandomNum(50));
ctx.fillStyle = randomColor();
ctx.fillText(getRandomNum(10), 100, getRandomNum(50));
ctx.fillStyle = randomColor();
ctx.fillText(getRandomNum(10), 150, getRandomNum(50));
}
getVerification();
</script>
</body>
</html>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。