刮刮卡(图片合成) 定义: globalCompositeOperation 属性,设置或返回如何将源图像 将 myCanvas 的背景图设置为一张图片,(刮开后显示) // 目标图像(已有的,外面一层即将被刮掉的那一图像) pen.beginPath(); pen.fillStyle = "red"; pen.fillRect(100, 300, 100, 100); // pen.globalCompositeOperation = "source-over";…

前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜欢这种方式. 你可能会很好奇, 它是如何实现的呢? 本文将阐述其原理, 并结合具体实例来演示如何借助H5的canvas来实现类刮刮卡的效果. 展示效果: 网页闯关游戏入口(请狠狠地点击我, ^_^) http://magic.mmxfgame.com. H5刮刮卡的实例源自第六关--拜访东方不败的故…

刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛干嘛不早说呢?????真是自找麻烦.既然写了就分享给大家吧,这个效果其实很早就有了,只是我们不常用到罢了.H5的Canvas我很坦然的说我不会.但是既然工作上需要就需要学习一下了.虽然有demo但是自己写的时候还是出现了很多的bug.下面给大家说一下实现刮刮卡效果的步骤吧.(ps:按照我自己的dem…

[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上面随意作画,这次,美术同学又本着把程序员折腾到底的态度,提出了又一奇葩需求,由于原需求设计商业机密,这里仅举个同理的例子说明. 附带福利图一张: 神马?没看够?还想看看其他人?请看耐心完全文 要做到上面的效果,glBlendFunc是个很好的选择.glBlendFunc是一个设置图像叠加方式的函数,就是把一张…

微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公众账号关注.对于企业来说,做微信推广重要的一个方面就是提高用户和公众账号之间的黏度,而微信刮刮卡就是其中最为常见的活动. 下面详细介绍: 一.使用 1. 新建 2. 奖项设置 3. 测试 保存后,给公众号发一个“刮刮卡”的消息, 就会收到刮刮卡的内容,进入活动后,就可以刮奖了 二.实现 1. 页面…

Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....postion:absoluti..高度宽度都是100% 1 #---2.初始化wScratchPad 1 #-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask.. 2 #-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/no…

你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. 教程地址:http://www.helloweba.com/view-blog-270.html 演示地址:…

一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文<Android实现自定义圆形.圆角和椭圆ImageView(使用Xfermode图形渲染方法)>, 今天我们来看看如何实现电商app里常用到的刮刮卡效果的view组件,其实原理和实现圆角图片的差不多,都是使用Xfermode渲染模式来实现的. (老规矩,源码在博文最后给出哈) 基本原理步骤是这样的…

网上的都是自己绘制的或者图片,我的需求是可以随意的自定义底部和顶部的布局.所以自己重写一个,原理就是直接继承 View 来实现一个刮层,让这个刮层和图片以及文字不产生任何依赖,再结合 FrameLayout 将刮层放置最上一层,刮层之下你想放多少图片文字,图片文字要怎么布局摆放都行.由于是FrameLayout ,刮层的上面想加内容都是可以的.如图: 原理:刮刮卡无非就是文本,或者图片,就是我们下边的布局,然后在其上绘制刮奖层,设置DST_OUT,然后把用户触摸绘制上去:这样消失以后就能看到背后…

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡效果~~上次看到有人写Android的刮刮卡效果~~于是乎产生了本篇博客~~此类例子也比较多了,大家可以百度看看~不过还是通过本例子,带大家发掘一下,里面隐含的知识~ 1.Xfermode以及PorterDuff 如果大家还记得,曾经在博客:完美实现图片圆角和圆形 简单介绍过圆角的实现原理也是基于这…