几天有需求做滑动解锁，想来点新鲜的，于是想挑战一下，cavas做图片滑动解锁；
原文链接：https://www.jb51.net/article/137129.htm
我们想实现这样的效果：
首先随便找一张图片渲染到canvas上，这里#canvas作为画布，#block作为裁剪出来的小滑块。
<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：
// 将两张图片渲染在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‘;
再教大家裁剪小真方形：
script：
// 将两张图片渲染在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‘; // 先利用clip()方法裁剪出个方块儿，让大家认识裁剪 var x = 150, y = 40, w = 42, r = 10, PI = Math.PI;//x坐标、y坐标、正方形的宽、圆的半径、圆周率(3.14...) 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);
上面大家学会了画正方形，裁剪正方形，下面裁剪出我们想要的形状，把原来的draw方法改写一下：
// 将两张图片渲染在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‘; // 先利用clip()方法裁剪出个方块儿，让大家认识裁剪 var x = 150, y = 40, w = 42, r = 10, PI = Math.PI;//x坐标、y坐标、正方形的宽、圆的半径、圆周率(3.14...) 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); //在坐标点（x+w/2,y-r+2）画一个r为半径的圆，角度开始为0，结束角度为2π，顺时针画个圆 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();//用剪刀裁剪 } draw(canvas_ctx); draw(block_ctx);
。
原文：https://www.cnblogs.com/fqh123/p/12359355.html