canvas实现刮刮卡效果

目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果。

成都创新互联网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,成都做网站、网站设计,塑造企业网络形象打造互联网企业效应。

原理

在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可。

分析

demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容。本demo是用时需要改变的内容为_width,_height,touchTop,touchLeft这几个参数,根据自身画布的位置自行计算即可。由于是长按事件,记得在移动端阻止浏览器默认功能。

效果图:

canvas实现刮刮卡效果

图(1)初始图

canvas实现刮刮卡效果

图(2)刮开效果

代码如下:





无标题文档




 

快来刮开!!!

中奖啦~!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!


本文题目:canvas实现刮刮卡效果
URL标题:http://bzwzjz.com/article/iiggcg.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计 成都企业网站建设 网站建设费用 网站建设方案 成都网站制作 网站制作公司 品牌网站建设 网站建设开发 定制网站建设多少钱 成都网站建设 企业网站设计 成都响应式网站建设 成都定制网站建设 专业网站设计 企业网站建设公司 响应式网站建设 企业网站设计 成都网站设计 成都网站建设 成都h5网站建设 攀枝花网站设计 成都网站建设