charset="utf-8">
圖案解鎖title>
head>
body>
var canvas_width = 310;
var canvas_height = 520;
var outer_radius = 35;
var inner_radius = 10;
var outer_stroke_color_normal = "rgba(63, 164, 223, 0.7)";
var outer_fill_color_normal = "rgba(94, 211, 229, 0.7)";
var inner_stroke_color_normal = "rgba(84, 169, 228, 0.7)";
var inner_fill_color_normal = "rgba(71, 167, 215, 0.7)";
var outer_stroke_color_touch = "rgba(109, 222, 92, 0.7)";
var outer_fill_color_touch = "rgba(172, 236, 162, 0.7)";
var inner_stroke_color_touch = "rgba(83, 209, 102, 0.7)";
var inner_fill_color_touch = "rgba(113, 217, 129, 0.7)";
var outer_stroke_color_error = "rgba(255, 45, 45, 0.7)";
var outer_fill_color_error = "rgba(255, 81, 81, 0.7)";
var inner_stroke_color_error = "rgba(255, 45, 45, 0.7)";
var inner_fill_color_error = "rgba(255, 81, 81, 0.7)";
var line_stroke_color_normal = "rgba(109, 222, 92, 0.7)";
var line_stroke_color_error = "rgba(255, 81, 81, 0.7)";
var circle_interval = 30;
var circle_margin_horizontal_border = (canvas_width - outer_radius * 2 * 3 - 2 * circle_interval) / 2;
var circle_margin_vertical_border = 170;
function
circle
(x, y, id)
this.checktouch = function
(m_x, m_y) else
}this.draw = function
(ctx)
}function
line
(x, y)
this.draw = function
(ctx)
}function
statusbar
() }
function
tip(x, y)
}var canvas = document.createelement("canvas");
canvas.width = canvas_width;
canvas.height = canvas_height;
canvas.style.display = "block";
canvas.style.margin = "20px auto";
canvas.style.backgroundimage = "url('')";
canvas.style.backgroundsize = canvas_width + "px " + canvas_height + "px";
var ctx = canvas.getcontext("2d");
var is_finish = false;
var is_mouse_down = false;
// 鬆開滑鼠後,啟動乙個計數器,相當於結果的顯示時間,這裡為50 * 20 = 1000ms
var wait_count_total = 50;
var wait_count = 0;
var correct_id_arr = [0, 4, 8, 5, 2, 1, 3, 6, 7]; // 正確的序列
var line_id_arr = ; // 用於儲存連線節點的序列
var statusbar = new statusbar();
var tip = new tip(canvas_width / 2, 120);
// 初始化連線線和節點圓列表
var line_list = ;
var circle_list = ;
for (var i = 0; i < 3; i++)
}this.reset = function
() }
this.checkiscorrect = function
() }
if (i == correct_id_arr.length)
}if (!is_correct)
for (var i = 0; i < line_list.length; i++)
} else
}this.addeventlistener("mouseup", function
(event)
}, false);
this.addeventlistener("mousedown", function
(event)
}}, false);
this.addeventlistener("mousemove", function
(event) }}
}, false);
// 更新函式,繪製所有圖形
this.setinterval(function
() for (var i = 0; i < line_list.length; i++)
if (is_finish)
}}, 20, false);
script>
html>
手機螢幕解鎖
實現原理 利用html5的canvas,將解鎖的圈圈劃出,利用touch事件解鎖這些圈圈,直接看 function createcircle restpoint.push return arr 複製 canvas裡的圓圈畫好之後可以進行事件繫結 function bindevent false ca...
監聽螢幕解鎖事件
在做乙個程式的時候,需要時刻保持某一服務是啟動的,因此想到了通過監聽螢幕screen on和screen off這兩個action。奇怪的是,這兩個action只能通過 的形式註冊,才能被監聽到,使用androidmanifest.xml 完全監聽不到。查了一下,發現這是powermanager那邊...
Android 監聽螢幕解鎖事件
在做乙個程式的時候,需要時刻保持某一服務是啟動的,因此想到了通過監聽螢幕screen on和screen off這兩個action。奇怪的是,這兩個action只能通過 的形式註冊,才能被監聽到,使用androidmanifest.xml 完全監聽不到。查了一下,發現這是powermanager那邊...