刮奖效果

2019年9月14日 101次阅读 来源: _lih

本人前端新手，刚入了一个小公司，公司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的https://developer.mozilla.org…，我用的是chrome版本号是51.0.2704.84 m，不知道是不是浏览器的问题。

16.7.11

找到原因了，dom接口捕获的事件和jquery捕获的事件是不同的
《刮奖效果》
没想到jquery连事件都封装了

    原文作者：_lih
    原文地址: https://segmentfault.com/a/1190000005760870
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞