博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
刮奖效果
阅读量:7136 次
发布时间:2019-06-28

本文共 1537 字,大约阅读时间需要 5 分钟。

本人前端新手,刚入了一个小公司,公司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捕获的事件是不同的

图片描述
没想到jquery连事件都封装了

转载地址:http://yktrl.baihongyu.com/

你可能感兴趣的文章
MongoDB 用户认证
查看>>
一些开源镜像站
查看>>
RAID
查看>>
linux rpm安装webmin
查看>>
DDOS***原理与防护
查看>>
懒加载 与 富文本编辑器 的 相爱相杀
查看>>
我的友情链接
查看>>
java转换是json需要的jar包导致的问题,
查看>>
mac安装brew和nginx
查看>>
技术博客
查看>>
软考信息系统监理师:2016年4月1日作业
查看>>
关于ssh远程登录太慢的解决方法
查看>>
bootstrap栅格系统显示规则
查看>>
子类化QMainWindows
查看>>
Windows完成端口 IOCP模型(一)
查看>>
修改roo的密码 虚拟机vmware8.04 Centos 6.3
查看>>
大数据真的好找工作么?
查看>>
Hibernate4离散结构课程在线考试系统
查看>>
安装部署LNMP/大并发nginx优化/php性能加速 实战
查看>>
rsync 和 配置及个人理解
查看>>