使用Konva.js canvas库实现手势密码

最新推荐文章于 2024-07-02 09:16:57 发布

90年的罐头�

最新推荐文章于 2024-07-02 09:16:57 发布

阅读量812

点赞数

分类专栏：前端 js html canvas

本文链接：https://blog.csdn.net/weixin_43978604/article/details/98969867

版权

本文介绍了如何利用Konva.js库在canvas上绘制手势密码界面，详细讲解了思路和JavaScript实现，包括手势线条绘制、鼠标滑动事件处理及手势密码的对比与重置操作。

摘要由CSDN通过智能技术生成

学习并使用 Konva.js 库

效果图

思路

用konva.js 库绘制 canvas界面及手势条线
鼠标滑动事件中对比并记录手势经过的点
模拟对比手手势密码重置界面

js

    var password = [] , mouse={} , width = height = 800 
    var stage = new Konva.Stage({
        container:'cvs',
        width:width,
        height:height
    })
    var layer = new Konva.Layer()
    // 外圆
    var outCircles = new Konva.Group()
    // 内圆
    var inCircles = new Konva.Group()
    // 记录手势经过的点 绘制成线条    
    var line = new Konva.Line({
        points:[],
        stroke:'blue',
        strokeWidth:width/40,
        id:'line',
        lineCap: 'round',
        lineJoin