H5lock-图形锁

最新推荐文章于 2021-06-04 05:03:16 发布

chenzxl

最新推荐文章于 2021-06-04 05:03:16 发布

阅读量596

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/chenzxl/article/details/105199149

版权

本文介绍H5lock，一个用于实现图形锁的JavaScript库。通过H5lock，开发者可以轻松为Web应用添加安全的图形解锁功能，增强用户体验。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>H5lock-A5源码</title>
    <style type="text/css">
        body {
    
            text-align: center;
            background-color: #305066;
        }
        .title {
    
            color: #22C3AA;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="H5lock.js"></script>
<script type="text/javascript">
new H5lock({
    
    chooseType: 4
}).init();
</script>

</body>
</html>

(function(){
   

        window.H5lock = function(obj){
   
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;
        };
 
 
        H5lock.prototype.drawCle = function(x, y) {
    // 初始化解锁密码面板
            this.ctx.strokeStyle = '#CFE6FF';
            this.ctx.lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        H5lock.prototype.drawPoint = function() {
    // 初始化圆心
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
   
                this.ctx.fillStyle = '#CFE6FF';
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.fill();
            }
        }
        H5lock.prototype.drawStatusPoint = function(type) {
    // 初始化状态线条
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
   
                this.ctx.strokeStyle = type