[转载]简易版 html5 撕掉mm的衣服 - blue_lg - 博客园

[转载]简易版 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&gt;&gt;1, canvas.height-50);//其中canvas&gt;&gt;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&gt;&gt;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 &lt; bsr || vy &lt; 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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏