如何用Canvas实现手势解锁特效来展示长尾词查询效果？

本文共计3593个文字，预计阅读时间需要15分钟。

目录+前言+Demo+需要实现的功能+初始化数据和页面渲染+touchstart+手指开始触摸事件+touchmove+监听手指滑动事件+touchend+监听手指触摸结束事件+页面滚动处理+连接的两颗星星之间有其他星星

目录

• 前言
• Demo
• 需要实现的功能
• 初始化数据和页面渲染
• touchstart 手指开始触摸事件
• touchmove 监听手指滑动事件
• touchend 监听手指触摸结束事件
• 页面滚动处理
• 连接的两颗星星之间有其他星星时

前言

之前在公司开发活动项目的时候，遇到一个项目需求要让用户使用手势画星位图来解锁星座运势，一看设计稿，这不就是我们平时的手机屏幕解锁吗？于是上网搜了一些关于手势解锁的文章，没找到可以直接复用的，于是只能自己打开canvas教程，边学习边设计实现了这个功能，同时兼容了移动端和PC端，在这里把代码分享出来，感兴趣的可以看看。