以下这种效果。
使用到的技术
-
canvas基本操作
-
canvas的离屏
-
js的dom2级事件注册处理函数
addEventListenter(eventType,listener,useCapture)
eventType:事件类型(click、focus、blur)不带on
listener:事件处理函数,可以是匿名函数
useCapture:默认值是false,只冒泡不捕获;true只捕获不冒泡(捕获很少用)。 -
移动端的触摸事件:touchstart、touchmove、touchend
HTML代码
<!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>图案解锁</title>
</head>
<body>
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript">
new lock().init();
</script>
</body>
</html>
JS代码
(function(){
/* 图案解锁
poorpenguin - v1.0.0
*/
window.lock = function(object){
var obj = object || {
};
this.width = obj.width || 300; //设置canvas的width
this.height = obj.height || 300; //设置canvas的height
this.chooseType = obj.chooseType || 3; //设置图案一排和一列的个数
}
//初始化
lock.prototype.init = function(){
this.createDom();
this.createCanvas();
this.createOffBg(); //绘制离屏
this.createBg(); //生成主屏背景
this.bindEvent();
}
//创建dom结构以及设置样式
lock.prototype.createDom = function(){
//标题
var h4 = '<h4 id="title" style="color:#66ccff;">请解锁</h4>';
//两个画布,canvas为主画布,offScreen为离屏
var canvas = document.createElement('canvas');
var offScreen = document.createElement('canvas');
canvas.setAttribute('id','canvas');
canvas.setAttribute('width',this.width);
canvas.setAttribute('height',this.height);
offScreen.setAttribute(