正文

一步一步教大家用canvas做图片滑动解锁(代码片段)

fqh123  fqh123  2023-04-16  322

关键词：

几天有需求做滑动解锁，想来点新鲜的，于是想挑战一下，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);

技术图片

由于clip是裁剪路径内的部分，因此直接像上面画圆是不行的，我们开启一条新的路径，然后画圆将这个正方形“遮盖”出一个缺口，这里会用到 globalCompositeOperation 属性，‘xor‘顾名思义。代码接上边：

// 将两张图片渲染在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();//用剪刀裁剪

      ctx.beginPath();//重新开始画
      ctx.arc(x,y+w/2, r,1.5*PI,0.5*PI) // 只需要画正方形内的半圆就行，方便背景图片的裁剪
      ctx.globalCompositeOperation = "xor";//将原图遮盖出一个缺口
      ctx.fill();//填充颜色 前面没加fillStyle就是白色
    
    draw(canvas_ctx);
    draw(block_ctx);

技术图片

现在一个基本的拼图形状有了，我们调整#block的大小，并将裁剪出来的滑块放入#block中：

// 将两张图片渲染在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);

      var blockWidth = w + r * 2;//滑块实际宽度
      var _y = y - r * 2 + 2 // 滑块实际的y坐标
      var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth);//拿到滑块的像素数据
      block.width = blockWidth;//将滑块dom元素的宽度设置成滑块的掉
      block_ctx.putImageData(ImageData, 0, _y)
    ;
    img.crossOrigin = ‘Anonymous‘;//防止图片报跨域的错
    img.src = ‘http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20200224232124.png?time=‘+ new Date();//加事件戳 防止图片报跨域的错
    // 先利用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();//用剪刀裁剪

      ctx.beginPath();//重新开始画
      ctx.arc(x,y+w/2, r,1.5*PI,0.5*PI) // 只需要画正方形内的半圆就行，方便背景图片的裁剪
      ctx.globalCompositeOperation = "xor";//将原图遮盖出一个缺口
      ctx.fill();//填充颜色 前面没加fillStyle就是白色
    
    draw(canvas_ctx);
    draw(block_ctx);

技术图片

。

一步一步教你ssm整合swagger(代码片段)

一：什么是swagger？?swagger是一款非常好用的写API文档的框架。其他自行百度二：ssm整合swagger？1：在maven的pom文件中引入依赖：（注意版本，否则会导致tomcat不能正常启动）<depende... 查看详情

一步一步教你使用lsmw批量处理数据

保存退出输入完后，保存退出查看详情

一步一步教你认识闭包

...什么用？为什么要用闭包？今天我们就带着这3个问题来一步一步认识闭包。闭包和函数紧密联系在一起，介绍闭包前有必要先介绍一些背景知识，诸如嵌套函数、变量的作用域等概念作用域作用域是程序运行时变量可被访问的... 查看详情

一步一步教你制作的第一个wordpress插件(代码片段)

💂个人网站:【海拥】【摸鱼小游戏】【神级源码资源网站】🤟风趣幽默的前端学习课程：👉28个案例趣学前端💅想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】💬免费且实用... 查看详情

一步一步教你制作的第一个wordpress插件(代码片段)

用html5/css3做winform，一步一步教你搭建cefsharp开发环境（附javascript异步调用c#例子，及全部源代码）上

本文为鸡毛巾原创，原文地址：http://www.cnblogs.com/jimaojin/p/7077131.html，转载请注明CefSharp说白了就是Chromium浏览器的嵌入式核心，我们用此开发Winform程序也就相当于在程序里面内嵌了一个谷歌浏览器。所以H5/CSS3以及各种Web开发界... 查看详情

一步一步教你接入tinker热修复

官方文档：https://github.com/Tencent/tinker 下面我们按照官方文档和这个里面的tinker-sample-android来进行集成Tinker。注意说明，官方demo的使用https://github.com/Tencent/tinker/wiki/Tinker-接入指南里面的使用步骤详解,注意：官方demo导... 查看详情

2.一步一步教你使用pycharm运行起第一个django项目(代码片段)

下面步骤展示的是如何经过VirtualBox管理器，使得pycharm和ubuntu中的项目环境连接对应起来！如果你有属于自己的服务器，核心步骤都是大差不差的，甚至使用服务器步骤更简单许多哦！（但是要注意：... 查看详情

一步一步教你如何制件zkeacms的扩展组件/插件

前言如果你还不知道ZKEACMS，不妨先了解一下。ASP.NETMVC开源建站系统ZKEACMS推荐，从此网站“拼”起来官方地址：http://www.zkea.net/zkeacms下载地址：https://github.com/SeriaWei/ASP.NET-MVC-CMS/releasesGitHub:https://github.com/SeriaWei/ASP. 查看详情

一步一步教你反向传播的样例

背景反向传播(Backpropagation)是训练神经网络最通用的方法之中的一个，网上有很多文章尝试解释反向传播是如何工作的，可是非常少有包括真实数字的样例，这篇博文尝试通过离散的数据解释它是如何工作的。Python实现的反向传... 查看详情

02~一步一步教你使用svn之svn的介绍

SVN的介绍一.学习SVN的主要内容的介绍1.基本操作:学习SVN有哪些基本操作2.服务器端的安装配置:SVN中必不可少的2个环境之一,会在下面的课程中介绍服务器如何去安装和配置3.客户端软件的使用:在实际开发中,使用客户端软件来操... 查看详情

樱花的季节，教大家用canvas画出飞舞的樱花树

...ttp://suohb.com/work/tree4.htm查看演示效果第一步，我们先画出一棵树的主体。我画树的使用的原理是，定义一个起始点，从这个点开始，向一个角度移动一段距离。得到另一个点。画出一条线连接两个点。以新得到... 查看详情

求一步一步教php留言板制作方法

菜鸟不会写PHP留言板..网上没有一步一步教..1.先设计数据表，一般留言板需要两个表：留言内容表、回复表留言内容表：messages字段如下：id自动增加contents留言内容messages_time留言时间回复表：reply字段如下：id自动增加messages_id... 查看详情

一步一步教你将开源项目上传到jcenter

...来，希望能帮助到小伙伴们，现在觉得还是挺简单的。第一步：首先是注册，这就是我踩的最大的一个坑，导致我一天都没有上传成功。网上说的都是去jcenter的网站上注册就查看详情

求android软件开发项目的教程，一步一步教的

参考技术Ahttp://wenku.baidu.com/course/view/b46ea98271fe910ef12df803这个是百度文库的轻松几步学Android开发。本课程包括Android平台下开发的基础知识，项目编程的实用技巧，还有多个真实案例讲解。通过学习，学员可快速开发一个可正常运... 查看详情

一步一步教你在docker容器下使用mmdetection训练自己的数据集

这里不再介绍mmdetection的安装和配置，使用mmdetection较简单的方法是使用已安装mmdetection的docker容器。这样直接省去了安装mmdetection的过程，让重心放在模型训练上！如果你对docker和mmdetection还不是很熟悉，请自行搜索一下，本文... 查看详情

一步一步教你tomcat优化和发布动态网站

Tomcat性能优化一、安装Centos01上安装tomcat发布动态网站jpress使用www.Benet.com访问，配置虚拟机主机通过www.benet.com和www.accp.com访问不同的虚拟主机1）上传tomcat文件包[root@centos01~]#rz[root@centos01~]#lsanaconda-ks.cfg公共图片音乐apache-tomcat-8.5... 查看详情

高阶数据结构（壹）——一步一步教你手撕avl树（增删查改）画图详解，内含代码实现包含注释）(代码片段)

🍎作者：努力学习的少年 🍎个人简介：双非大二，一个正在自学c++和linux操作系统，写博客是总结知识，方便复习 🍎目标：进大厂 🍎如果你觉得文章可以的话，... 查看详情