刮獎效果

本人前端新手，剛入了一個小公司，公司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連事件都封裝了