js et canvas implémentent la fonction de code de vérification du puzzle coulissant

Cet article partage principalement avec vous js et canvas pour implémenter la fonction de code de vérification de puzzle coulissant De nos jours, la vérification de puzzle coulissant est souvent rencontrée.

L'image ci-dessus est le code de vérification du puzzle coulissant de NetEase Cloud Shield. Il doit avoir une bibliothèque d'images dédiée et la position de recadrage est fixe. Mon idée est de générer des images de manière aléatoire, de générer des positions de manière aléatoire, puis d'utiliser un canevas pour découper les curseurs et les images d'arrière-plan. Les étapes spécifiques sont décrites ci-dessous.

Tout d'abord, recherchez une image aléatoire et affichez-la sur le canevas. Ici, #canvas est utilisé comme canevas et #block est utilisé comme petit curseur recadré.

<canvas width="310" height="155" id="canvas"></canvas>
<canvas width="310" height="155" id="block"></canvas>
var canvas = document.getElementById(&#39;canvas&#39;)
 var block = document.getElementById(&#39;block&#39;)
 var canvas_ctx = canvas.getContext(&#39;2d&#39;)
 var block_ctx = block.getContext(&#39;2d&#39;)
 var img = document.createElement(&#39;img&#39;)
 img.onload = function() {
  canvas_ctx.drawImage(img, 0, 0, 310, 155)
  block_ctx.drawImage(img, 0, 0, 310, 155)
 };
 img.src = &#39;img.jpg&#39;

Voyons d'abord comment découper la forme du puzzle. La forme du puzzle est plus compliquée. dessinez un carré, puis ce qui précède Écrivez le code :

var x = 150, y = 40, w = 42, r = 10, PI = Math.PI 
 function draw(ctx) {
  ctx.beginPath()
  ctx.moveTo(x, y)
  ctx.lineTo(x + w, y)
  ctx.lineTo(x + w, y + w)
  ctx.lineTo(x, y + w)
  ctx.clip()
 }
 draw(canvas_ctx)
 draw(block_ctx)

x, y sont les coordonnées du coin supérieur gauche du carré. Maintenant, écrivez simplement le hasard. nombre utilisé lors de la génération ultérieure, w est la longueur du côté du carré, r est le rayon du cercle derrière lequel l'espace est dessiné. Nous encapsulons d’abord le processus de dessin avec une fonction permettant de faciliter la manipulation simultanée de l’arrière-plan et du curseur ultérieurement. Utilisez la méthode clip() pour recadrer l'image et générer un carré.

Dessinez ensuite les cercles en haut et à droite du carré :

function draw(ctx) {
  ctx.beginPath()
  ctx.moveTo(x,y)
+  ctx.lineTo(x+w/2,y)
+  ctx.arc(x+w/2,y-r+2, r,0,2*PI) //
+  ctx.lineTo(x+w/2,y)
  ctx.lineTo(x+w,y)
+  ctx.lineTo(x+w,y+w/2)
+  ctx.arc(x+w+r-2,y+w/2,r,0,2*PI) //
+  ctx.lineTo(x+w,y+w/2)
  ctx.lineTo(x+w,y+w)
  ctx.lineTo(x,y+w)
  ctx.lineTo(x,y)
  ctx.clip()
 }

La position des deux annotations décale le centre du cercle de 2 pixels vers l'intérieur pour obtenir le style d'espacement. Ensuite, il y a la partie creuse à gauche. Puisque le clip est la partie située à l'intérieur du chemin de détourage, il n'est pas possible de dessiner un cercle directement comme ci-dessus. Nous ouvrons un nouveau chemin, puis dessinons un cercle pour "couvrir" un espace. dans le carré. Ceci sera utilisé ici. attribut globalCompositeOperation, 'xor' comme son nom l'indique. Le code continue d'en haut :

function draw(ctx) {
  ctx.beginPath()
  ...
  ctx.lineTo(x,y)
  ctx.clip()
+  ctx.beginPath()
+  ctx.arc(x,y+w/2, r,1.5*PI,0.5*PI) // 只需要画正方形内的半圆就行，方便背景图片的裁剪
+  ctx.globalCompositeOperation = "xor"
+  ctx.fill()
}

Maintenant que nous avons une forme de puzzle de base, nous ajustons la taille du #bloc et recadrez-le Mettez le curseur obtenu dans #block :

img.onload = function() {
  ctx.drawImage(img, 0, 0, 310, 155)
  block_ctx.drawImage(img, 0, 0, 310, 155)
+  var blockWidth = w + r * 2
+  var _y = y - r * 2 + 2 // 滑块实际的y坐标
+  var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
+  block.width = blockWidth
+  block_ctx.putImageData(ImageData, 0, _y)
 }

Maintenant, nous devons afficher l'image originale sur la toile de gauche et découpez-le Supprimez la partie centrale du curseur. Le processus de dessin du chemin est le même ici. La seule différence est que clip() est remplacé par fill() pour obtenir l'effet. fonction avant, avec de légers changements. C'est tout :

- function draw(ctx) {
+ function draw(ctx, operation) {
  ...
- ctx.clip()
+ ctx.fillStyle = '#fff'
+ ctx[operation]()
  ...
}
+ draw(canvas_ctx, 'fill')
+ draw(block_ctx, 'clip')

L'étape suivante consiste à écrire le style, sauter. it :

Ensuite, nous écrivons l'événement glisser. Nous pouvons enregistrer la position de la souris lorsque la souris est enfoncée, puis définir la valeur gauche du curseur lors du déplacement. . Enfin, lorsque la souris est relâchée, la valeur gauche du curseur à ce moment et la valeur x lorsque le curseur a été recadré pour la première fois sont jugées. Si elles se situent dans une certaine plage, la vérification est réussie, sinon la vérification échoue.

Enfin, ajoutez des images aléatoires et des positions de coupe aléatoires, et c'est fondamentalement ok. De plus, vous pouvez juger du changement de l'axe Y lorsque la souris bouge pour déterminer si elle est actionnée par un "humain". Bien sûr, la sécurité Web est un tel gâchis, je n'entrerai donc pas dans les détails et je me contenterai de faire un simple jugement.

Comme il n'y a pas de bordure ou d'ombre ajoutée au bord de la tranche, le curseur de certaines images n'est pas très identifiable et doit être amélioré plus tard (en fait, je n'ai pas encore joué avec - -), J'espère que quelqu'un qui comprend cela pourra m'aider à l'améliorer//

Recommandations associées :

Comment pour créer un code de vérification simple en php

Code d'implémentation PHP pour le code de vérification

Implémentation PHP Cliquer sur le code de vérification ou le voir clairement actualisez le code de vérification

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!