Step by step teach you to do the picture with canvas slide to unlock

A few days there is a demand to do the slide to unlock, like some fresh, so want to challenge, cavas do the picture slide to unlock;

Original link: https://www.jb51.net/article/137129.htm

We want to achieve this effect:

 

 First just find a picture rendered to the canvas, where #canvas as canvas, # block cut out as a small slider.

<canvas width="310" height="155" id="canvas" style="border:1px solid red;"></canvas>
<canvas width="310" height="155" id="block" style="border:1px solid green;"></canvas>

script：

// The two images rendered on Cavas 
    var Canvas = document.getElementById ( 'Canvas' );
     var Block = document.getElementById ( 'Block' );
     var canvas_ctx = canvas.getContext ( '2D' );
     var block_ctx = Block .getContext ( '2D' );
     var IMG = document.createElement ( 'IMG' );
    img.onload = function() {
      canvas_ctx.drawImage(img, 0, 0, 310, 155);
      block_ctx.drawImage(img, 0, 0, 310, 155);
    };
    img.src = './touxiang.png';

 

 And then teach you cut a small square true:

script：

// The two images rendered on Cavas 
    var Canvas = document.getElementById ( 'Canvas' );
     var Block = document.getElementById ( 'Block' );
     var canvas_ctx = canvas.getContext ( '2D' );
     var block_ctx = Block .getContext ( '2D' );
     var IMG = document.createElement ( 'IMG' );
    img.onload = function() {
      canvas_ctx.drawImage(img, 0, 0, 310, 155);
      block_ctx.drawImage(img, 0, 0, 310, 155);
    };
    img.src = './touxiang.png' ;
     // first use Clip () method of cut out of a block children, so that we know cropping 
    var X = 150, Y = 40, W = 42 is, R & lt = 10, the PI = the Math .PI; // X coordinate, y coordinate, the width of a square, a circle radius, pi (3.14 ...) 
    function Draw (CTX) {
      ctx.beginPath (); // pen 
      ctx.moveTo (X, Y); // to point to the point on the nib canvas 
      ctx.lineTo (X + W, Y);
      ctx.lineTo(x + w, y + w);
      ctx.lineTo(x, y + w);
      ctx.clip (); // scissors cutting 
    }
    draw(canvas_ctx);
    draw(block_ctx);

 

 Above all learned to draw a square, square cut, cut out the following form we want, the original draw method redrafting:

// The two images rendered on Cavas 
    var Canvas = document.getElementById ( 'Canvas' );
     var Block = document.getElementById ( 'Block' );
     var canvas_ctx = canvas.getContext ( '2D' );
     var block_ctx = Block .getContext ( '2D' );
     var IMG = document.createElement ( 'IMG' );
    img.onload = function() {
      canvas_ctx.drawImage(img, 0, 0, 310, 155);
      block_ctx.drawImage(img, 0, 0, 310, 155);
    };
    img.src = './touxiang.png' ;
     // first use Clip () method of cut out of a block children, so that we know cropping 
    var X = 150, Y = 40, W = 42 is, R & lt = 10, the PI = the Math .PI; // X coordinate, y coordinate, the width of a square, a circle radius, pi (3.14 ...) 
    function Draw (CTX) {
      ctx.beginPath (); // pen 
      ctx.moveTo (X, Y); // to point to the pen point
      ctx.lineTo (x + w / 2, y); // draw nib onto the intermediate edge of the square
      ctx.arc (x + w / 2, y-r + 2, r, 0,2 * PI); // coordinate point (x + w / 2, y -r + 2 circle of radius) to draw a r angle start to 0, ending angle 2π, draw a circle clockwise
      ctx.lineTo (X + W / 2, Y); // tip moves to the middle of the square edge
      ; ctx.lineTo (W + X, Y) // right edge tip to draw a square
      ctx.lineTo (x + w, y + w / 2); // then draw nib line to the right of the midpoint of the square
      ctx.arc (x + w + r-2, y + w / 2, r, 0,2 * PI) // draw a circle in the right place
      ctx.lineTo (x + w, y + w / 2); // pen line drawn to the right of the midpoint of the square
      ctx.lineTo (X + W, W + Y); // pen to draw a bottom line to the right of the square 
      ctx.lineTo (X, Y + W); // then drawn to the left edge of the square 
      ctx.lineTo ( X, Y); // then draw a closed loop to the starting point square 
      ctx.clip (); // with scissors cutting 
    }
    draw(canvas_ctx);
    draw(block_ctx);

 

 

 

 

。