Red de conocimiento informático - Material del sitio web - Cómo utilizar el lienzo para lograr el efecto del código de verificación (código fuente adjunto)

Cómo utilizar el lienzo para lograr el efecto del código de verificación (código fuente adjunto)

Este artículo le muestra cómo usar Canvas para lograr el efecto del código de verificación (código fuente adjunto). Los amigos que lo necesiten pueden consultarlo. Espero que sea útil para todos.

Podemos ver el código de verificación en la interfaz de inicio de sesión habitual. La función del código de verificación es detectar si es operado por un humano, evitar operaciones no humanas, como máquinas, y evitar la operación. base de datos sea fácilmente violada.

Los códigos de verificación suelen estar escritos en lenguajes de back-end como PHP y java.

Pero en la interfaz, también puedes usar canva o SVG para dibujar el código de verificación.

El código de verificación dibujado no puede ser una simple cadena aleatoria, pero se deben agregar algunos elementos de interferencia a la interfaz de dibujo:

Por ejemplo: segmentos de línea de interferencia, puntos de interferencia, fondo, etc. .

El distractor de captcha de lienzo en esta demostración es relativamente simple.

Puedes ver los distractores de este ejemplo en la ilustración.

Efecto de visualización del código de verificación del lienzo:

Haga clic para cambiar (redibujar) el código de verificación:

Ejecute la función en la consola para generar el valor de retorno (verificación código):

Código fuente:

CAPTCHA para lienzo

var ctxW = document.getElementById("check").clientWidth;

var ctxH = document.getElementById(" check").clientHeight;

/**

* Genera un número aleatorio.

* @param {[Number]} min [límite inferior del intervalo de números aleatorios]

* @param {[Number]} max [límite superior del intervalo de números aleatorios]

* @return {[Number]} [devuelve un número aleatorio en este intervalo].

[Devuelve un número aleatorio dentro de este rango]

*/

function ranNum(min, max) {

return Math.random() * (max - min) + min;

}

}

/**

* Devuelve un color aleatorio. La gama de colores se puede configurar.

* @param {[Number]} min [límite de color inferior]

* @param {[Number]} max [límite de color superior]

* @return { [String]} [color aleatorio]

* Devuelve un color aleatorio. [Color aleatorio]

*/

function ranColor(min, max) {

var r = ranNum(min, max);

var g = ranNum(min, max);

var b = ranNum(min, max);

// Devuelve "rgb(" + r + "," + g + "," + b + ")";

Devuelve `rgb( ${r},${g},${b})`;

}

/**

* Matriz de cadenas aleatoria

* @return {[Array]} [matriz aleatoria] * @param {[Number]} num [número a sorteo]

* @param {[Number]} min [límite inferior]

* @param {[Number]} max [límite superior]

* /

función drawLine( canvasId, canvasW, canvasH, num, min, max) {

for (var i = 0; i < num; i++) {

// Comienza a dibujar (levanta el bolígrafo)

canvasId.beginPath();

// Comienza a dibujar líneas.

lineTo(ranNum(0, canvasW), ranNum(0, canvasH));

// Comienza a dibujar (levanta el bolígrafo)

canvasId.beginPath();

// Empieza a dibujar (coge el bolígrafo).canvasH));

canvasId.strokeStyle = ranColor(min, max);

canvasId.stroke();

canvasId.closePath();

}

}

// Dibujar código de verificación

function drawCanvas() {

// Limpiar el lienzo

ctx.clearRect(0, 0, 200, 60);

/ / Dibuja el fondo

drawBg(ctx, ctxW, ctxH.200, 255);

// Dibuja puntos de interferencia

drawCircle(ctx, ctxW, ctxH , 20, 5, 200 , 255);

// Dibujar segmentos de línea de interferencia

drawLine(ctx, ctxW, ctxH, 20, 0, 255); Dibujar código de verificación

var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);

return str;

}

drawCanvas();

document.getElementById('check').onclick = drawCanvas;

Contenido relacionado:

Código de verificación PHP, código de función simple (con representaciones)

Cómo usar Canvas y js para completar la generación del código de verificación Introducción al método

上篇: Cómo usar el proxy````Cómo configurarlo````Detalles````Gracias`` 下篇:

Artículos populares