浅谈HTML5 canvas实现移动端刮奖效果

最新推荐文章于 2024-04-04 09:45:45 发布
最新推荐文章于 2024-04-04 09:45:45 发布
阅读量5.9k 收藏 2
点赞数 3
分类专栏： JavaScript HTML 文章标签： HTML5 canvas JavaScript 刮奖 touchmove
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouziyu2011/article/details/67640749
版权

1、刮奖图片通过设置div的背景图片实现，设置一个完全罩住刮奖图片的canvas，在canvas中绘制了一块等大的浅灰色矩形，使其盖住下方的刮奖图片。

2、为使得手指划过画布时，擦除掉相应区域的浅灰色，可以运用canvas中的globalCompositeOperation属性，通过将其设置为destination-out，使得在已填充颜色的基础上再次进行绘制时，所绘制的区域变得透明，从而露出下方的刮奖图片。

3、为画布创建touchmove事件侦听，当手指在画布上滑动时，在触摸位置绘制相应圆形，与已有的填充色互相消减，从而擦去浅灰色涂层。

4、触摸点的pageX和pageY属性返回的是针对

最低0.47元/天 解锁文章
筱葭
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML5实现刮奖效果
shaofei63的专栏
01-22 1674
要实现刮奖效果，最重要的是要找到一种方法：当刮开上层的涂层是就能看到下层的结果。而HTML5的canvas API中有一个属性globalCompositeOperation，这个属性有多个值，而实现刮奖效果要用到的值就是destination-out。意思就是：在已有内容和新图形不重叠的地方，已有内容保留，所有其他内容成为透明。这样可能不好理解，后面实现的时候会解释。有了globalCompos
canvas实现刮刮乐,刮刮卡,js实现刮刮乐,刮刮卡
weixin_47705597的博客
03-16 527
代码直接复制拿去用,不会看注释.记得底部下载刷子图片. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-s
探索 Vue-Scratch-Card：为你的Web应用添加有趣的刮刮卡功能
gitblog_00089的博客
04-04 404
探索 Vue-Scratch-Card：为你的Web应用添加有趣的刮刮卡功能 项目地址:https://gitcode.com/ZENGzoe/vue-scratch-card Vue-Scratch-Card 是一个基于 Vue.js 的轻量级组件，它让你能在Web应用中轻松集成刮刮卡功能。这款开源项目旨在提供一种简单、灵活的方式来创建互动式的刮刮卡效果，无论是用于促销活动，还是增加用户体验，都...
js刮奖处理
相约9.28,幸福那一刻
12-16 387
这个是在移动端上处理的一个刮奖小Demo 直接上完整代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="format-detection" content="telephone=no"&a
原生js实现刮刮奖的功能
Kratial的博客
03-22 329
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
HTML5 canvas实现移动端上传头像拖拽裁剪效果
09-28
在本文中，我们将探讨如何使用HTML5的canvas元素实现移动端的头像上传并进行拖拽裁剪的功能。这个功能允许用户选择一张图片，然后在预览区域通过拖动和调整来裁剪出所需的头像部分。 首先，HTML部分创建了一个基本...
html5canvas实现刮奖效果
11-06
在这个场景中，"html5canvas实现刮奖效果"指的是利用Canvas API构建一种互动式的刮奖游戏，用户可以通过鼠标操作模拟刮开覆盖层，揭示隐藏在下面的图像或信息。 首先，我们要理解Canvas的基本结构。HTML5中的`...
HTML5 Canvas实战之刮奖效果.rar
05-04
在这个“HTML5 Canvas实战之刮奖效果”的主题中，我们将深入探讨如何利用Canvas实现类似真实世界中刮奖卡的效果。刮奖效果在网页游戏中、互动营销活动中非常常见，能增加用户参与度和趣味性。 首先，我们要了解...
基于HTML5 Canvas 实现弹出框效果
09-28
在本文中，我们将探讨如何利用HTML5 Canvas 实现弹出框效果，这对于那些需要在Canvas画布上展示附加信息的应用场景非常重要。 传统的HTML元素实现弹出框相对简单，但Canvas是一个统一的画布，所有绘制的图形都是其...
gua:js 刮奖效果 刮刮乐
06-18
gua.js 一个移动端的刮刮乐活动的，工具，没有任何依赖。 设定 一些设定值。 gua.init(el,{ bg : 'url', //中奖图片的地址 fg : 'url', //待刮图片的地址 size : 5, //默认为5，每次刮的大小 p : 0, //刮掉的占剩余的百分比，默认为0，只要设置这个值，程序内部自动判断值，达到这个值后，直接执行clear函数 start : function, move : function, end : function, clear : function //清除后，执行的回调 }) //init 第一个参数也可以接受选择器，字符串类型 例子 请看exp.html: 引入 [removed][removed] 设定 gua.init(oDiv,{ bg :
简单的Canvas刮奖带动画效果的实例
12-25
简单的Canvas刮奖带动画效果的实例，具体效果可以到我的博客查看 http://blog.csdn.net/zhouzme/
刮奖效果-HTML-代码
05-24
一个web网页，用HTML写的，css样式、JavaScript也在里面，会动，有特效，学习前端的朋友可以试着下载来看看，有些地方是可以借鉴的，挺不错的
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
01-21
绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出： 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话，得改下js,目前支持谷歌，火狐，ie>=10,如果网友想要的话我就去写个 代码如下: 代码如下: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <meta name=”viewport” content=”width=de
canvas实现刮刮卡效果
01-19
目前在html5和css3的热潮下，html页面的效果也是层出不穷，下面我们来介绍使用canvas来模仿刮奖刮开效果。 原理 在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布，当手指或者鼠标点击画布并移动时，将画布上移动过的轨迹变成透明即可。 分析 demo中在class为content的div上盖上一层灰色的画布，然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标，通过在坐标原点位置画一个半径10px的透明圆形来透过画布，显示出画布下的内容。本demo是用时需要改变的内容为_width，_height,touchTop,touchLeft这几个参数，根据自身画布的位置
前端遮罩层实现_cocos creator--游戏开奖功能组件《刮刮卡》特效实现
weixin_42500380的博客
12-28 642
一、 需求分析【1】实现手指触摸刮开效果；【2】优化：判断刮开与否（能否正常看到奖项）。二、 游戏场景可视化编辑三、 手指触摸刮刮卡动态刮开效果的实现Mask为反向遮罩节点，必须确保大小和位置为（0，0）。运用反向遮罩和绘图来实现。 首先为Mask节点添加Mask组件。记得将Inverted（即反向遮罩）勾上。点击链接加入群聊【unity/cocos交流二群】原理：类似于PS中的遮罩，或者沙画，比...
html刮奖特效,jQuery+HTML5手机刮刮乐刮奖代码
weixin_39743369的博客
06-04 420
jQuery+HTML5手机刮刮乐刮奖代码jQuery+HTML5手机刮刮乐刮奖代码var _htmlFontSize = (function () {var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;if (clientWidt...
HTML5模仿刮奖效果-页面涂抹消失插件wScratch
yzbben的博客
03-10 2005
本文转至：http://www.xuanfengge.com/html5-imitates-scratch-effect-disappear-page-smear-plug-in-wscratch.html 前言 HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。 wScrat
HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐
weixin_30511107的博客
06-24 1067
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的，有兴趣的可以改成android版本的，或者其他的~ 效果图： 贴一张我中500w的照片，咋办啊，怎么花呢~ 好了，下面开始原理： 1、刮奖区域两个Canvas，一个是...
canvas实现刮奖效果
qq_39008487的博客
07-29 175
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
canvas图像处理教程
最新发布
04-06
将带您深入探索 HTML5 Canvas 技术，从基础知识到高级应用，助您在创意无限的图像处理世界中游刃有余。无论您是新手还是专家，这里都有对您有用的技巧和实用信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值