移动端刮刮乐的实现方式（js+HTML5）(2)

document.addEventListener("touchend",function(){ /* 获取imageData对象*/ var imageDate = ctx.getImageData(0,0,canvas.width,canvas.height); /* */ var allPX = imageDate.width * imageDate.height; var iNum = 0;//记录刮开的像素点个数 for(var i=0;i<allPX;i++){ if(imageDate.data[i*4+3] == 0){ iNum++; } } if(iNum >= allPX*3/4){ // disappear里面写了缓慢清除的css3动画效果 canvas.setAttribute('class','disappear'); } },false)

" .disappear " 的css样式，css3消失动画

.disappear{ -webkit-animation: disa 2s 1; animation: disa 2s 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes disa{ 0%{opacity:1;} 100%{opacity: 0;} }

相对比网上的其他一些实现方式，这种还是比较简单的一种，大家相互学习。有什么其他的办法可以留言相互学习