js+canvas implémente la fonction de code de vérification du puzzle coulissant

Cet article présente principalement js+canvas pour implémenter la fonction de code de vérification du puzzle coulissant. Cet article combine l'exemple de code pour le présenter étape par étape de manière très détaillée. Les amis qui en ont besoin peuvent s'y référer

<.>

L'image ci-dessus montre 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 comment découper la forme du puzzle. La forme du puzzle est plus compliquée. . Tout d'abord, nous dessinons un carré. Ensuite, écrivons le code ci-dessus :

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 nombre aléatoire utilisé lors de la génération ultérieure, w est la longueur du côté du carré et 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 2px vers l'intérieur pour obtenir le style d'écart. 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 de #block. Et placez le curseur recadré 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 le canevas de gauche. Prenez l'image originale et découpez la partie centrale du curseur. Le processus de dessin du chemin ici est le même. La seule différence est que clip() est remplacé par fill() pour obtenir l'effet. chemin en tant que fonction, apportez simplement de légères modifications :

- 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 :

Ensuite, il s'agit d'écrire l'événement glisser. Nous pouvons enregistrer la position de la souris lorsque la souris est enfoncée. , puis faites glisser Définissez la valeur gauche du curseur lors du déplacement. Enfin, lorsque vous relâchez la souris, déterminez la valeur gauche du curseur à ce moment et la valeur x lorsque le curseur a été recadré pour la première fois. Si elle se situe 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 //

Le code derrière est un peu compliqué, donc je ne le publierai pas ici . Pour voir le code complet, cliquez ici pour l'adresse de démonstration et cliquez ici

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Intégration du framework SSH+Jquery+Ajax

Intégration du framework JQuery+Ajax+Struts2+Hibernate pour obtenir une connexion complète S'inscrire

Les similitudes et les différences entre ajax et le développement web traditionnel

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!