<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机锁屏9宫键解屏效果</title>
<style>
*{
margin: 0;
padding: 0;
}
#canvas-div{
padding-right: 16px;
margin: 0 auto;
width: 300px;
height: 360px;
}
canvas{
border: 1px solid red;
width: 100%;
height: 100%;
}
.circle{
width: 60px;
height: 60px;
background: teal;
border-radius: 48px;
position: absolute;
text-align: center;
line-height: 60px;
font-weight: bold;
font-size: 25px;
}
.circle:hover{
cursor: pointer;
}
.one,.two,.three{
top:30px;
}
.seven,.eight,.nine{
top: 260px;
}
.four,.five,.six{
top: 145px;
}
.one,.four,.seven{
left:43%;
}
.two,.five,.eight{
left:48%;
}
.three,.six,.nine{
left:53%;
}
.selected{
background: purple;
}
</style>
</head>
<body onselectstart="return false">
<div id="canvas-div">
<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" >
您的浏览器不支持canvas标签。
</canvas>
</div>
<div id="one" class="circle one">1</div>
<div id="two" class="circle two">2</div>
<div id="three" class="circle three">3</div>
<div id="four" class="circle four">4</div>
<div id="five" class="circle five">5</div>
<div id="six" class="circle six">6</div>
<div id="seven" class="circle seven">7</div>
<div id="eight" class="circle eight">8</div>
<div id="nine" class="circle nine">9</div>
<div id="select_no" hidden></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var cx1 = canvas.offsetLeft;
var cy1 = canvas.offsetTop;
var cx2 = canvas.offsetLeft + canvas.offsetWidth;
var cy2 = canvas.offsetTop + canvas.offsetHeight;
var lock_secret = '123456';//锁屏密码
document.onmousedown = function(event){
var x = event.clientX;
var y = event.clientY;
if(x > cx1 && x < cx2 && y > cy1 && y < cy2){//在画布内才有效
$('.circle').each(function(index, el) {
var divx1 = el.offsetLeft - cx1;
var divy1 = el.offsetTop - cy1;
var divx2 = (el.offsetLeft + el.offsetWidth) - cx1;
var divy2 = (el.offsetTop + el.offsetHeight) - cy1;
var re_x = x - cx1;
var re_y = y - cy1;
if(re_x > divx1 && re_x < divx2 && re_y > divy1 && re_y < divy2){
if(!$(this).hasClass('selected')){
select_no.append($(this).html());
$(this).addClass('selected');
}
var div_center_x = (divx2 + divx1) / 2;//圆点中心点x坐标
var div_center_y = (divy2 + divy1) / 2;//圆点中心点y坐标
localStorage.setItem('center',div_center_x + ',' + div_center_y);
ctx.beginPath(); //开始一个新的绘制路径
var res = getLocation(event);
ctx.lineWidth = 5; //设置线段的宽度
ctx.moveTo(res['x'], res['y']); //定义直线的起点坐标为(10,10)
}
});
document.onmousemove = function(event){
document.onmousedown = null;
var x = event.clientX;
var y = event.clientY;
if(x > cx1 && x < cx2 && y > cy1 && y < cy2){//在画布内才有效
$('.circle').each(function(index, el) {
var divx1 = el.offsetLeft - cx1;
var divy1 = el.offsetTop - cy1;
var divx2 = (el.offsetLeft + el.offsetWidth) - cx1;
var divy2 = (el.offsetTop + el.offsetHeight) - cy1;
var re_x = x - cx1;
var re_y = y - cy1;
if(re_x > divx1 && re_x < divx2 && re_y > divy1 && re_y < divy2){
if(!$(this).hasClass('selected')){
select_no.append($(this).html());
$(this).addClass('selected');
}
}
var res = getLocation(event);
ctx.lineTo(res['x'], res['y']); //定义直线的终点坐标为(50,10)
ctx.strokeStyle = "blue";
ctx.lineCap = 'round';
ctx.stroke(); //沿着坐标点顺序的路径绘制直线
});
}
}
document.onmouseup = function(event){
document.onmousemove = null;
document.onmouseup = null;
var x = event.clientX;
var y = event.clientY;
if(x > cx1 && x < cx2 && y > cy1 && y < cy2){//在画布内才有效
$('.circle').each(function(index, el) {
var divx1 = el.offsetLeft - cx1;
var divy1 = el.offsetTop - cy1;
var divx2 = (el.offsetLeft + el.offsetWidth) - cx1;
var divy2 = (el.offsetTop + el.offsetHeight) - cy1;
var re_x = x - cx1;
var re_y = y - cy1;
var re_ordinate = re_x + ',' + re_y;
if(re_x > divx1 && re_x < divx2 && re_y > divy1 && re_y < divy2 && re_ordinate != center_ordinate){
var center_ordinate = localStorage.getItem('center');
var div_center_x = (divx2 + divx1) / 2;//圆点中心点x坐标
var div_center_y = (divy2 + divy1) / 2;//圆点中心点y坐标
if((div_center_x + ',' + div_center_y) != center_ordinate){//不同个圆圈内才绘画图形
var res = getLocation(event);
ctx.lineTo(res['x'], res['y']); //定义直线的终点坐标为(50,10)
ctx.stroke(); //沿着坐标点顺序的路径绘制直线
ctx.closePath(); //关闭当前的绘制路径
}
}
});
var selected_secret = $('#select_no').html();
if(selected_secret == lock_secret){
alert('解屏成功');
location.href = "http://www.baidu.com";//目标地址
}else{
alert('密码错误');
location.reload();
}
}
}
}
}
//获取画布内的某点坐标
function getLocation(event) {
var bbox = canvas.getBoundingClientRect();
return {
'x' : (event.clientX - bbox.left) * (canvas.width / bbox.width),
'y' : (event.clientY - bbox.top) * (canvas.height / bbox.height)
};
}
</script>
</body>
</html>
效果截图: