js+ca​​nvasでスライディングパズル認証コード機能を実装

この記事では、スライディング パズルの検証コード機能を実装するための js+ca​​nvas を主に紹介します。この記事では、サンプル コードを組み合わせて、ステップごとに詳細に紹介します。必要な方は参考にしてください。

上の写真は。 NetEase Cloud Shield 検証コードのスライディング パズルには専用の画像ライブラリが必要で、トリミング位置は固定されています。私のアイデアは、画像をランダムに生成し、位置をランダムに生成してから、キャンバスを使用してスライダーと背景画像を切り出すことです。具体的な手順を以下に説明します。

まず、ランダムな画像を見つけてキャンバス上にレンダリングします。ここでは #canvas がキャンバスとして使用され、#block がトリミングされた小さなスライダーとして使用されます。

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

パズルの形状を切り出す方法を考えてみましょう。まず、パズルの形状はより複雑になります。次に、上記のコードを書きます。

x, y は正方形の左上隅です。ここで座標を書き留め、生成するときに乱数を使用します。W は正方形の辺の長さ、r はギャップを描く円の半径です。戻る。最初に描画プロセスを関数でカプセル化し、後で背景とスライダーを同時に操作できるようにします。 Clip() メソッドを使用して画像をトリミングし、正方形を生成します。

次に、正方形の上部と右側に円を描きます:

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)

2 つの注釈は、ギャップ スタイルを実現するために円の中心を 2 ピクセル内側にオフセットします。次に左側の空洞部分ですが、クリップはクリッピングパス内の部分なので、上記のように直接円を描くことはできません。その後、新しいパスを開き、隙間を「埋める」ために円を描きます。これは、名前が示すように、ここでは globalCompositeOperation 属性として使用されます。コードは上から続きます:

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

基本的なパズルの形ができたので、#block のサイズを調整し、切り取ったスライダーを #block に配置します:

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

次に、左側のキャンバスに元の画像を表示し、中央のスライダー部分を切り取る必要があります。ここでのパスの描画プロセスは同じです。唯一の違いは、効果を実現するために、clip() が fill() に変更されることです。前にパスを描画するプロセスを関数にカプセル化しましたが、少し変更するだけです:

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

次のステップはスタイルを書くことです、それはスキップしてください:

次に、ドラッグイベントを記述するだけで、マウスが押されたときのマウス位置を記録し、ドラッグするときにスライダーの左の値を設定できます。最後にマウスを放すと、その時のスライダーの左の値と最初にスライダーを切り取ったときのxの値を求め、一定の範囲内であれば検証に合格し、それ以外の場合は検証に失敗します。

最後にランダムな写真とランダムな切り取り位置を追加すれば、基本的にはOKです。さらに、マウスが動いたときの y 軸の変化を判断して、それが「人間」によって操作されているかどうかを判断することもできます。 もちろん、Web セキュリティは非常に面倒なので、詳細には触れずに簡単に説明します。単純な判断。

スライスの端に境界線や影が追加されていないため、一部の写真のスライダーはあまり識別できず、後で改善する必要があります（実際にはまだ理解していません - -）。これを理解できる人は助けてくれます。 //

背後にあるコードは少し面倒なので、ここには投稿しません。完全なコードを表示するには、ここをクリックしてデモのアドレスを確認してください。

上記は私が皆さんのためにまとめたものであり、今後皆さんのお役に立てれば幸いです。

関連記事:

SSH+Jquery+Ajaxフレームワーク統合

JQuery+Ajax+Struts2+Hibernateフレームワーク統合により完全なログイン登録を実現

Ajaxと従来のWeb開発の類似点と相違点

以上がjs+ca​​nvasでスライディングパズル認証コード機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。