头像

HTML5实现刮刮卡效果

来源:https://www.daimasucai.com/html5/39.html 代码素材管理员 2016-09-16浏览()

你玩过刮刮卡么?一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

HTML5实现刮刮卡效果
分类:首页>>网页特效>>html5 阅读次数:
查看演示 下载次数: 10

手机扫码访问:

下载资源 下载积分: 10

  我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。

  HTML

  我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上。

  Javascript

  首先,我们要禁用页面的鼠标选中拖动的事件,就是不运行执行选中操作。

    var bodyStyle = document.body.style; 

    bodyStyle.mozUserSelect = 'none'; 

    bodyStyle.webkitUserSelect = 'none'; 

  然后进入主体,当检测到图片加载完的时候,首先定义一些属性和函数,函数layer()用来绘制一个灰色的正方形,eventDown()定义了按下事件eventUp()定义了松开事件,eventMove()定义了移动事件,其中当按下时,获取坐标位移,并通过arc(x, y, 10, 0, Math.PI * 2)来绘制小圆点。

  你可以下载DEMO中的完整的代码,你可以根据实际需求,结合后台程序与数据库,完成一个真正的刮刮卡程序。


声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/html5/39.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>