这篇博客探讨了如何使用HTML5的Canvas元素来创建一个仿手机画图解锁的功能。主要内容包括canvas的基本操作、离屏Canvas的使用，以及如何结合js的DOM2级事件注册处理函数，特别是移动端的触摸事件如touchstart、touchmove和touchend，来实现画图交互。
以下这种效果。
使用到的技术
-
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(
最低0.47元/天 解锁文章
1965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
