canvas实现刮刮卡效果，计算擦除面积时不兼容手机端

2015-03-16 10:05:29 711 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

手把手教你调试eDP接口：Main Link信号异常、AUXCH通信失败怎么办？本文提供了一份详尽的eDP接口调试实战指南，重点解决Main Link信号异常与AUXCH通信失败两大核心难题。文章系统介绍了从工具准备、信号完整性分析（眼图、抖动测量）到AUXCH协议解码、HPD信号检查的完整排查流程，并分享了链路训练诊断与常见避坑技巧，帮助硬件工程师高效定位并解决显示问题。阅读详情

问题：PC上正常，手机上第50行执行不了（计算擦除面积处），哪位大哥能帮忙看看吗

全部代码如下，拷贝可直接运行（随便弄2张图片放在html文件一致的路径下，pet.jpg和pet2.jpg）：



<!doctype html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<title>html5 canvas</title>

<meta name="apple-touch-fullscreen" content="yes" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

</head>

<body>

<canvas></canvas>

<script>

(function(bodyStyle) {

bodyStyle.mozUserSelect = 'none';

bodyStyle.webkitUserSelect = 'none';

 

var img = new Image();

var canvas = document.querySelector('canvas');

canvas.style.backgroundColor='transparent';

canvas.style.position = 'absolute';

 

img.addEventListener('load', function(e) {

var ctx;

var w = img.width,

h = img.height;

var offsetX = canvas.offsetLeft,

offsetY = canvas.offsetTop;

var mousedown = false;

 

function layer(ctx) {            

 

var img=document.getElementById("lamp");

var pat=ctx.createPattern(img,"repeat");                

 

ctx.fillStyle = pat;

ctx.fillRect(0, 0, w, h);

}

 

function eventDown(e){

e.preventDefault();

mousedown=true;

}

 

function eventUp(e){

    e.preventDefault();

    mousedown = false;

    

    alert('0');  

    var data = ctx.getImageData(0,0,w,h).data;  

    alert('1');

    

    for(var i=0,j=0;i<data.length;i+=4){

        if(data[i] && data[i+1] && data[i+2] && data[i+3]){

            j++;

        }

    }

    //当图层被擦除剩余80%时触发

    if(j<=w*h*0.8){

        ctx.clearRect(0,0,w,h);

    }

}

 

function eventMove(e){

e.preventDefault();

if(mousedown) {

if(e.changedTouches){

e=e.changedTouches[e.changedTouches.length-1];

}

var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,

y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;

with(ctx) {

beginPath()

arc(x, y, 20, 0, Math.PI * 2);

fill();

}

}

}

 

canvas.width=w;

canvas.height=h;

canvas.style.backgroundImage='url('+img.src+')';

ctx=canvas.getContext('2d');

ctx.fillStyle='transparent';

ctx.fillRect(0, 0, w, h);

layer(ctx);

 

ctx.globalCompositeOperation = 'destination-out';

 

canvas.addEventListener('touchstart', eventDown);

canvas.addEventListener('touchend', eventUp);

canvas.addEventListener('touchmove', eventMove);

canvas.addEventListener('mousedown', eventDown);

canvas.addEventListener('mouseup', eventUp);

canvas.addEventListener('mousemove', eventMove);

});

img.src = 'pet.jpg';

})(document.body.style);

</script>

 

<img id="lamp" src="pet2.jpg">

</body>

</html>