本人前端新手,刚入了一个小公司,公司web游戏的需求比较大,所以最近在搜各种微信营销活动的案例,以备不时之需。前几天看到一个微信刮刮奖的东西,感觉蛮有意思的,照着网上搜的教程自己做了下,发现几个坑,这里做下记录,希望大家多多指教。
游戏主要是一个canvas控件,先填充验色或图片,然后设置上下文(getContext('2d')
)的globalCompositeOperation
属性为'destination-out'
,然后绑定mousemove
/touchmove
事件来画圆就行了。问题出在绑定touchmove
上: guagua.stage .on(mobile?"touchstart":"mousedown",function () { guagua.stage.drawn=true; console.log("start") }) .on(mobile?"touchmove":"mousemove", mobile?function (e) { e.preventDefault(); if(guagua.stage.drawn){ pointX=e.originalEvent.touches[0].clientX-guagua.stageX; pointY=e.originalEvent.touches[0].clientY-guagua.stageY; guagua.drawPoint(pointX,pointY); } }:function (e) { e.preventDefault(); if(guagua.stage.drawn){ pointX=e.clientX-guagua.stageX; pointY=e.clientY-guagua.stageY; guagua.drawPoint(pointX,pointY); } } ) .on(mobile?"touchend":"mouseup",function () { console.log("end"); guagua.stage.drawn=false; if(guagua.howMuchLeft()>50){ guagua.stage.hide(); } });
网上的例子是14年的,里面移动端事件的x坐标是e.touches[0].clientX
我试了一下,结果报错:touches未定义,打断点下发现touches
事件列表是包含在originalEvent
属性里的,然后加上去以后确实可以了,但是mozila的文档也是有touches的,我用的是chrome版本号是51.0.2704.84 m,不知道是不是浏览器的问题。
16.7.11
找到原因了,dom接口捕获的事件和jquery捕获的事件是不同的