Mikel
[转载]简易版 html5 撕掉mm的衣服 – blue_lg – 博客园.
昨天在csdn闲逛的时候，看到了http://blog.csdn.net/cuixiping/article/details/7161808这篇文章，便尝试着自己写一个玩玩，顺便贴上写注释。
html:
撕掉mm的衣服 <script src="draw.js"></script> <p style="color: yellow;">点击就可以尝试下面的效果了</p> <div><canvas id="canvas" width="480" height="320">很抱歉，是时候更换浏览器了<a href="http://firefox.com.cn/download/">点击下载firefox</a></canvas></div>
css代码的实现的效果：使得canvas元素居中显示，且周围为“关灯”效果，凸显出图片。
draw.js
var ready,canvas,context;
var load;
var BRUSH_SIZE=18;//BRUSH_SIZE指的是鼠标表示的画刷,"橡皮擦"的大小
var img =new Image();
var cimg =new Image();
window.onload=function(){
if(!document.getElementById("canvas").getContext){//若浏览器不支持canvas，则返回
return;
}
canvas= document.getElementById("canvas");//获取canvas元素
context = canvas.getContext('2d');//获取canvas画布
loading();
pics =['images/a1.jpg','images/a2.jpg'];//图片数组，pics[0]为当前图片，pics[1]为替换后的图片
load=0;//初始化标志两幅图片加载次数的变量
cimg.onload = img.onload = function (){
if(++load==2){//表明两幅图均加载完成
initCoverImage();
}
}
cimg.onerror = img.onerror = function (){//有图像加载过程中发生错误
context.clearRect(0,0,canvas.width,canvas.height);
context.font = '12px sans-serif';//显示字体格式
context.fillStyle = '#00ff00';
context.textAlign = 'center';
context.fillText('Load images failure!', canvas.width>>1, canvas.height-50);//其中canvas>>1典型的右移运算，即除以2
}
//上述所有事件设置完成后，设置图片的src
cimg.src = pics[0];
img.src = pics[1];
}
function loading(){//设置及显示
context.clearRect(0,0,canvas.width,canvas.height);//清空canvas窗口
context.fillText('Loading...', canvas.width>>1, canvas.height-50);//若图片获取较慢，会显示loading...
}
function initCoverImage(){//绘制当前图像
canvas.width = cimg.width;//调整canvas大小，符合真实图片
canvas.height = cimg.height;
context.drawImage(cimg, 0, 0, canvas.width, canvas.height);
bindEvents();//绑定事件
}
function bindEvents(){
canvas.ontouchstart = canvas.onmousedown = function(e) { ready = true; };//鼠标摁下
canvas.ontouchend = canvas.ontouchcancel = canvas.onmouseup = canvas.onmouseout = (function(e) { ready = false; });//鼠标未摁下
canvas.ontouchmove = canvas.onmousemove = updateCanvas;//相应鼠标的移动事件
}
function updateCanvas(e){
if(!ready) {//鼠标未摁下
return;
}
var r = canvas.getBoundingClientRect();//获取当前canvas区域的坐标
var vx = e.clientX - r.left;//横向距离
var vy = e.clientY - r.top;//纵向距离
var bs = BRUSH_SIZE;
var bsr = bs/2;
if ( vx < bsr || vy < bsr) {//据canvas边缘太近，则指定此时"擦拭"无效
return;
}
context.rect(vx-bsr, vy-bsr, bs, bs);//否则圈定当前一块区域方便被"替换"为下一幅图的相同区域
context.drawImage(img, vx-bsr, vy-bsr, bs, bs, vx-bsr, vy-bsr, bs, bs);//替换
}
上面的这个是利用drawImage来覆盖图片的形式完成脱衣过程，也可以用IplImage图像矩阵来替换，原理是一样的。
这个，大家可以自己尝试。
（由于实在是搞不到那些mm的图片，就用自己的照片做个示范，演示下效果^-^）
images/a1.jpg
images/a2.jpg
最终效果：
转载请注明：http://www.cnblogs.com/blue-lg/archive/2011/12/30/2307649.html
