js und Canvas implementieren die Funktion des Sliding-Puzzle-Bestätigungscodes

Dieser Artikel teilt Ihnen hauptsächlich js und Canvas zur Implementierung der Sliding-Puzzle-Verifizierungsfunktion mit. Heutzutage ist die Sliding-Puzzle-Verifizierung häufig anzutreffen.

Das Bild oben ist der Schiebepuzzle-Bestätigungscode von NetEase Cloud Shield. Es sollte über eine eigene Bildbibliothek verfügen und die Zuschneideposition ist festgelegt. Meine Idee besteht darin, Bilder nach dem Zufallsprinzip zu generieren, Positionen nach dem Zufallsprinzip zu generieren und dann die Schieberegler und Hintergrundbilder mithilfe der Leinwand auszuschneiden. Die spezifischen Schritte werden unten beschrieben.

Suchen Sie zunächst ein zufälliges Bild und rendern Sie es auf der Leinwand. Hier wird #canvas als Leinwand und #block als zugeschnittener kleiner Schieberegler verwendet.

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

Lassen Sie uns zunächst überlegen, wie die Form des Puzzles ausgeschnitten wird Zeichnen Sie ein Quadrat und schreiben Sie dann den obigen 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 sind die Koordinaten der oberen linken Ecke des Quadrats. Schreiben Sie nun einfach den Zufall Zahl, die später bei der Generierung verwendet wird, w ist die Seitenlänge des Quadrats, r ist der Radius des Kreises, hinter dem die Lücke gezeichnet wird. Wir kapseln den Zeichenprozess zunächst mit einer Funktion, um später die gleichzeitige Manipulation von Hintergrund und Schieberegler zu ermöglichen. Verwenden Sie die Methode clip(), um das Bild zuzuschneiden und ein Quadrat zu erstellen.

Zeichnen Sie als nächstes die Kreise oben und rechts auf das Quadrat:

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()
 }

Die Position der beiden Anmerkungen verschiebt den Mittelpunkt des Kreises um 2 Pixel nach innen, um den Lückenstil zu erreichen. Dann ist da noch der hohle Teil auf der linken Seite. Da der Clip der Teil innerhalb des Beschneidungspfads ist, ist es nicht möglich, wie oben beschrieben, einen Kreis zu zeichnen. Wir öffnen einen neuen Pfad und zeichnen dann einen Kreis, um eine Lücke zu „decken“. Im Quadrat wird hier das Attribut „globalCompositeOperation“ verwendet, „xor“. Der Code wird von oben fortgesetzt:

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()
}

Da wir nun eine grundlegende Puzzleform haben, passen wir die Größe von #block und an zuschneiden Platzieren Sie den resultierenden Schieberegler in #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)
 }

Jetzt müssen wir das Originalbild auf der linken Leinwand anzeigen und Schneiden Sie es aus. Der Prozess zum Zeichnen des Pfads ist hier derselbe. Der einzige Unterschied besteht darin, dass clip() in fill() geändert wird, um den Effekt zu erzielen Funktion vorher, mit geringfügigen Änderungen. Das ist es:

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

Der nächste Schritt besteht darin, den Stil zu schreiben, überspringen it:

Dann schreiben wir das Drag-Event. Wir können die Mausposition aufzeichnen, wenn die Maus gedrückt wird, und dann den linken Wert für den Schieberegler beim Ziehen festlegen . Wenn Sie schließlich die Maustaste loslassen, bestimmen Sie den linken Wert des Schiebereglers zu diesem Zeitpunkt und den x-Wert, als der Schieberegler zum ersten Mal zugeschnitten wurde. Wenn er innerhalb eines bestimmten Bereichs liegt, ist die Überprüfung bestanden, andernfalls schlägt die Überprüfung fehl.

Fügen Sie zum Schluss zufällige Bilder und zufällige Schnittpositionen hinzu, und schon ist es im Grunde in Ordnung. Darüber hinaus können Sie anhand der Änderung der y-Achse feststellen, ob die Maus von einem „Menschen“ bedient wird. Natürlich ist die Websicherheit so ein Durcheinander, deshalb werde ich nicht auf Details eingehen ein einfaches Urteil.

Da am Rand des Slice kein Rand oder Schatten hinzugefügt wird, ist der Schieberegler einiger Bilder nicht gut erkennbar und muss später verbessert werden (eigentlich habe ich noch nicht damit herumgespielt – -), ich hoffe, jemand, der das versteht, kann mir helfen, es zu verbessern//

Verwandte Empfehlungen:

Wie um einen einfachen Bestätigungscode in PHP zu erstellen

PHP-Implementierungscode für Bestätigungscode

PHP-Implementierung Klicken Sie auf den Bestätigungscode oder sehen Sie ihn deutlich Aktualisieren Sie den Bestätigungscode

Das obige ist der detaillierte Inhalt vonjs und Canvas implementieren die Funktion des Sliding-Puzzle-Bestätigungscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!