html5橡皮擦

篇一：HTML5实现手势屏幕解锁

HTML5实现手势屏幕解锁

明月H5课程 效果展示

实现原理

利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。

function createCircle() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径

var n = chooseType;// 画出n*n的矩阵

lastPoint = [];

arr = [];

restPoint = [];

r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关

for (var i = 0 ; i < n ; i++) {

for (var j = 0 ; j < n ; j++) {

arr.push({

x: j * 4 * r + 3 * r,

y: i * 4 * r + 3 * r

});

restPoint.push({

x: j * 4 * r + 3 * r,

y: i * 4 * r + 3 * r

});

}

}

//return arr;

}

复制代码

canvas里的圆圈画好之后可以进行事件绑定

function bindEvent() {

can.addEventListener("touchstart", function (e) {

var po = getPosition(e);

console.log(po);

for (var i = 0 ; i < arr.length ; i++) {

if (Math.abs(po.x - arr[i].x) < r && Math.abs(po.y - arr[i].y) < r) { // 用来判断起始点是否在圈圈内部

touchFlag = true;

drawPoint(arr[i].x,arr[i].y);

lastPoint.push(arr[i]);

restPoint.splice(i,1);

break;

}

}

}, false);

can.addEventListener("touchmove", function (e) {

if (touchFlag) {

update(getPosition(e));

}

}, false);

can.addEventListener("touchend", function (e) {

if (touchFlag) {

touchFlag = false;

storePass(lastPoint);

setTimeout(function(){

init();

}, 300);

}

}, false);

}

复制代码

接着到了最关键的步骤绘制解锁路径逻辑，通过touchmove事件的不断触发，调用canvas的moveTo方法和lineTo方法来画出折现，同时判断是否达到我们所画的圈圈里面，其中lastPoint保存正确的圈圈路径，restPoint保存全部圈圈去除正确路径之后剩余的。 Update方法：

function update(po) {// 核心变换方法在touchmove时候调用

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

for (var i = 0 ; i < arr.length ; i++) { // 每帧先把面板画出来

drawCle(arr[i].x, arr[i].y);

}

drawPoint(lastPoint);// 每帧花轨迹

drawLine(po , lastPoint);// 每帧画圆心

for (var i = 0 ; i < restPoint.length ; i++) {

if (Math.abs(po.x - restPoint[i].x) < r && Math.abs(po.y - restPoint[i].y) < r) { drawPoint(restPoint[i].x, restPoint[i].y);

lastPoint.push(restPoint[i]);

restPoint.splice(i, 1);

break;

}

}

}

复制代码

最后就是收尾工作，把路径里面的lastPoint保存的数组变成密码存在localstorage里面，之后就用来处理解锁验证逻辑了。

function storePass(psw) {// touchend结束之后对密码和状态的处理

if (pswObj.step == 1) {

if (checkPass(pswObj.fpassword, psw)) {

pswObj.step = 2;

pswObj.spassword = psw;

document.getElementById('title').innerHTML = '密码保存成功';

drawStatusPoint('#2CFF26');

window.localStorage.setItem('passwordx', JSON.stringify(pswObj.spassword)); window.localStorage.setItem('chooseType', chooseType);

} else {

document.getElementById('title').innerHTML = '两次不一致，重新输入'; drawStatusPoint('red');

delete pswObj.step;

}

} else if (pswObj.step == 2) {

if (checkPass(pswObj.spassword, psw)) {

document.getElementById('title').innerHTML = '解锁成功';

drawStatusPoint('#2CFF26');

} else {

drawStatusPoint('red');

document.getElementById('title').innerHTML = '解锁失败';

}

} else {

pswObj.step = 1;

pswObj.fpassword = psw;

document.getElementById('title').innerHTML = '再次输入';

}

}

复制代码

篇二：基于HTML5 Canvas的画图板设计与实现

摘 要

Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。而作为下一代互联网标准，HTML5自然也是备受期待和瞩目。HTML5是近十年来Web开发标准巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。现阶段对于HTML5技术的研发和开发工作主要集中在技术草案的确立与新互联网应用的开发上，而随着互联网的发展，HTML标准也在不断变化，HTML标准已经走过第4代了，因为它能够用简单的标签元素，代替属性能实现之前需要用很多复杂JavaScript代码才能有实现的功能，HTML5越来越受到欢迎。

HTML5带来很多令人激动的新特性，这在之前的HTML中是不可见到的。其中一个最值得提及的特性就是用于绘画的 HTML Canvas，可以对2D或位图进行动态、脚本的渲染。本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在实现过程中也利用了最新的CSS3技术，最后再次总结了这次毕设的经验和对未来的展望。

本文针对其引入的Canvas绘图元素进行了深入的研究，此元素可以替代画图作为动画渲染的工具，效率与安全性更高，开发更便捷，必将是以后的动画，游戏等应用首选的开发方式，前景非常好。

【关键词】Web2.0 HTML5 CSS3 Canvas

ABSTRACT

Web2.0 brings a wealth of Internet technology for all to enjoy the fun of technology development and experience progress. As a next-generation Internet standard, HTML5 is naturally highly anticipated and attention. HTML5 is a huge leap over the past decade Web development standards. Unlike the previous version,HTML5 is not just used to represent Web content, its new mission is the Web into a full-fledged application platform, HTML5 platform, video, audio, image, animation, and interaction with the computer be standardized. At this stage for the HTML5 technology and development work focused on the establishment of the draft technology and new Internet application development, HTML standards are changing with the development of the Internet, HTML standard has gone through four generations, because it simple label elements, instead of before the property can be realized with a lot of complex JavaScript code in order to achieve the functions, HTML5 has been more popular.

HTML5 brings a lot of exciting new features. This is not seen in the previous HTML. One of the most worth mentioning the characteristics is HTML Canvas for painting, 2D or bitmap rendering of dynamic script. I detailed analysis the HTML5 technology introduction and development prospects, a deeper look into the core of the introduction of HTML5 tag Canvas element, the Canvas can be achieved, based on the a similar Windows drawing board, including pencil, stamp imitation, draw a straight line, circle, rectangle, eraser, background image, take a swatch in the realization of the process also takes advantage of the latest CSS3 techniques and, finally, this complete set up experience and vision for the future.

This paper introduces the Canvas drawing elements which conducted research, this element can replace the drawing as a tool for animation rendering, higher efficiency and security, the development of more convenient, be the future animation, games and other application development method of choice , the outlook is very good.

【Key words】WEB2.0 HTML5 CSS3 Canvas

目 录

前 言 ....................................................................................................................................................... 1

第一章 关于HTML5和画图板 ..................................................................................................... 2

第一节 HTML5简介 ....................................................................................................................... 2

第二节 HTML5特性 ....................................................................................................................... 2

第三节 HTML5国内外发展现状 ................................................................................................ 3

第四节 画图工具 .............................................................................................................................. 4

第二章 相关技术简介 ....................................................................................................................... 5

第一节 Canvas元素简介................................................................................................................ 5

第二节 第一个Canvas程序的实现 ............................................................................................ 5

第三节 JavaScript及jQuery简介 ................................................................................................ 7

第四节 CSS3简介 ............................................................................................................................ 9

第五节 开发工具DreamWeaver介绍....................................................................................... 12

第六节 调试工具Firefox及Firebug简介 .............................................................................. 13

第三章 功能设计 .............................................................................................................................. 16

第一节 需求设计 ............................................................................................................................ 16

第二节 基本原理 ............................................................................................................................ 17

第三节 布局及界面设计 .............................................................................................................. 19

第四节 JavaScript设计 ................................................................................................................. 20

第四章 功能的实现 ......................................................................................................................... 21

第一节 简单功能的实现 .............................................................................................................. 21

第二节 前台显示实现 ................................................................................................................... 24

第三节 JavaScript画图实现 ........................................................................................................ 25

第四节 最终效果 ............................................................................................................................ 32

第五节 不足之处 ............................................................................................................................ 38

第五章 结束语 .................................................................................................................................. 39 致 谢 .................................................................................................................................................... 40 参考文献 ................................................................................................................................................ 41 附 录 .................................................................................................................................................... 42

前 言

随着互联网时代的高速发展，上网早已经成为人民日常生活中一个必不可少的部分，人们可以在网络上获取信息，甚至于在网络上完成日常的正常生活。看新闻，看电视，订餐等等。

HTML的上个版本早在1999年制定，随着21世纪网络的不断发展，已经不能适应当前的需求，于是HTML5营运而生了。HTML5是HTML下一个的主要修订版本，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，现仍处于发展阶段。它希望能够减少浏览器对丰富性网络应用服务的插件的需要，并且提供更多能有效增强网络应用的标准集。

HTML5的出现再次告诉我们，我们的生活，日常办公，越来越有可能全在网页端实现了。如今很多人喜欢在电脑上绘图，画图版作为一个日常的生活工具，如今也能在我们网页端实现了。HTML5一个很有用实用的特性是用于绘画的Canvas元素，Canvas拥有许多绘制功能如画笔、矩形、圆形、字符以及图像处理的方法，他为人们在网页绘图及图像处理带来了方便。

第一章 关于HTML5和画图板

第一节 HTML5简介

HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组，WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

HTML5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

支持HTML5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

HTML5提供了一些新的元素和属性，例如