本发明提供一种基于浏览器的刮刮卡实现方法，包括：步骤10、活动主办方向服务端提交活动信息；步骤20、用户通过电子设备的浏览器访问服务端，提交用户信息，登陆服务端；步骤30、登陆刮刮卡系统后，所述服务端返回刮刮卡界面；步骤40、用户在线使用刮刮卡，所述浏览器提交刮开的中奖信息；步骤50、服务端判断该刮开的中奖信息是否中奖，并将中奖结果返回浏览器，浏览器通知用户是否中奖，如果中奖，用户根据所述用户信息兑奖。本发明可以代替传统纸质刮刮卡，只要有内嵌浏览器即可，实现跨平台、多设备接入。同时具有接入成本低、节约制造成本，保护环境等优点。
1.基于浏览器的刮刮卡实现方法，其特征在于，包括如下步骤：
步骤10、活动主办方向服务端提交活动信息；所述活动信息包括奖品信息，中奖几率，兑奖方式、活动时间及有效性说明；所述奖品信息包括奖品图片和奖品说明文字；
步骤20、用户通过电子设备的浏览器访问服务端，提交用户信息，登录服务端，若未注册用户信息，则先注册用户信息再登录服务端；所述电子设备为具有多点触摸功能的设备；
步骤30、登录刮刮卡系统后，所述服务端返回刮刮卡界面；
步骤40、用户在线使用刮刮卡，所述浏览器提交刮开的中奖信息；
步骤50、服务端判断该刮开的中奖信息是否中奖，并将中奖结果返回浏览器，浏览器通知用户是否中奖，如果中奖，用户根据所述用户信息兑奖；
所述步骤30具体为：登录刮刮卡系统后，显示刮刮卡界面时，浏览器向服务端发送数据请求，服务端根据活动主办方提交的活动信息生成该用户的中奖信息返回浏览器；浏览器加载完服务端返回的中奖信息后，将刮奖区清空，把中奖信息绘制在奖品信息层；
所述中奖信息是图案或文字或图案与文字的结合，但均以图片为载体，记录在图片上；
所述刮刮卡界面设有刮奖区，所述刮奖区由两个绘制层叠加组成，上层为涂刮层，下层为奖品信息层，且涂刮层完全覆盖奖品信息层，所述奖品信息层用于记录中奖信息，所述涂刮层用于遮盖奖品信息层及作为刮奖时奖品信息的重绘层；
所述步骤40具体为：用户在线使用刮刮卡，其刮奖过程采用椭圆算法判断中奖信息是否被刮开，具体为：以所述中奖信息的载体的中心为圆心，载体的长的一半为椭圆形的长半径、载体的宽的一半为椭圆形的短半径，形成一个椭圆区域，若手指不在所述椭圆区域内进行刮开操作，则不进行任何响应，若手指在所述椭圆区域内进行刮开操作，则判定中奖信息已被刮开；对于椭圆区域内的被刮开的区域采用模拟图章原理提高奖品图的绘制效率，所述模拟图章原理具体为：将所述奖品信息层上对应于所述被刮开的区域设置为拷贝区域，将涂刮层上对应于所述被刮开的区域设置为绘制区，将所述拷贝区域内的中奖信息仿制到绘制区，用户在刮开过程中，已拷贝过的区域不重复进行拷贝，实现真实模拟刮刮卡的刮开过程并提高绘制效率；
用户手指在刮奖区进行刮开操作，当手指离开刮奖区域的时候，判断所述中奖信息是否已被刮开，如果已被刮开，则将中奖信息显示在椭圆区域；所述浏览器提交刮开的中奖信息，如果未被刮开，则不做响应；
所述步骤30中，服务端根据活动主办方提交的活动信息采用预抽奖方式生成该用户的中奖信息返回浏览器；所述预抽奖方式具体为：预先生成该用户的中奖信息，在服务端记录该中奖信息中对应的奖品的临时中奖状态，只有在所述步骤40中，判定该中奖信息已被刮开，该中奖信息中对应的奖品才转正式中奖状态，该预抽奖方式解决了用户高并发下重复抽奖问题。
2.根据权利要求1所述的基于浏览器的刮刮卡实现方法，其特征在于：所述步骤50具体为：服务端判断该刮开的中奖信息是否中奖并验证数据的合法性，并将中奖结果返回浏览器，浏览器通知用户是否中奖，如果中奖，用户根据所述用户信息兑奖。
3.根据权利要求1所述的基于浏览器的刮刮卡实现方法，其特征在于：所述服务端采用服务器集群和分布缓存技术架构解决高并发所带的性能瓶颈问题，具体为：所述服务端包括：Web应用服务群集、Redis Cache服务器群、触发服务器以及数据库服务器群，所述Web应用服务群集是由一LVS服务器和复数台Web应用服务器组成，所述LVS服务器根据IP负载均衡技术和基于内容分发技术，将来自浏览器的请求均衡地转移到各所述Web应用服务器上执行，所述Web应用服器采用Web Cache来缓存页面数据，从而提高页面的响应数据；
所述Redis Cache服务器群是由一主Redis服务器和复数台从Redis服务器构成；
所述数据库服务器群是由一主数据库服务器和复数台从数据库服务器构成；
所述触发服务器从所述主数据库服务器获取数据，之后写入所述主Redis服务器；所述主Redis服务器接收来自各所述Web应用服务器和所述主数据库服务器的写入数据，并同步到所述从Redis服务器，所述主数据库服务器处理来自各所述应用服务器的数据写入及触发服务器的数据读取工作，并将数据同步到从数据库服务器，所述Web应用服务器的数据从所述从Redis服务器中读取。
4.根据权利要求1所述的基于浏览器的刮刮卡实现方法，其特征在于：所述步骤30中，运用html5的2D绘图技术把中奖信息绘制在奖品信息层，所述步骤40中，运用html5的2D绘图技术将所述拷贝区域内的中奖信息仿制到绘制区，从而实现了刮开的动画效果。
5.根据权利要求1所述的基于浏览器的刮刮卡实现方法，其特征在于：所述步骤30中，所述涂刮层上绘制有提示信息，运用html5的2D绘图技术将所述提示信息绘制在涂刮层。
6.根据权利要求1所述的基于浏览器的刮刮卡实现方法，其特征在于：所述刮刮卡界面还设有奖品展示区，所述奖品展示区用于显示抽奖规则及奖品图标、名称。
7.根据权利要求1所述的基于浏览器的刮刮卡实现方法，其特征在于：所述电子设备包括：触屏手机、台式电脑、笔记本电脑或平板电脑。
基于浏览器的刮刮卡实现方法
【技术领域】
[0001] 本发明涉及一种基于浏览器的刮刮卡实现方法。【背景技术】
[0002] 现有的刮刮卡大部分是基于特定材质或外部设备或装置而实现，无法实现跨平台、多设备接入。
[0003] 例如，公开号为101539966，公开日为2009年9月23日的发明专利公开了一种电子式刮刮乐系统与方法，包含用以储存第一分享影像的储存装置以及一电子装置，所述电子装置包含：接收单元、存储单元、显示单元以及处理单元。该专利的电子式刮刮乐系统需要采用储存装置及电子装置等硬件实现刮刮卡系统，从该专利说明书附图也可以确定，其是一种刮刮乐专用设备，而本专利使用软件方法实现刮刮卡交互式的效果，客户端通过网页访问服务器，与服务端交互，从而实现刮刮卡数据的传递并呈现。
[0004] 公开号为103049866A，公开日为2013年4月17日的发明专利公开了一种电子刮刮卡的运用方法及系统，该专利所述的刮刮卡运用方法和系统是需要特定的客户端环境，即客户端必须安装刮刮卡软件程序，不具备多设备多用户联网使用，而本专利所述方法可以让多用户在不同地域用不同设备接入使用刮刮卡，实现零安装、零部署。已公开的该发明专利不能解决本发明所提出的技术问题且对本发明没有启示。
[0005] 目前还没有发现在浏览器上实现在线刮刮卡系统的公开文献，为此本发明申请人引入通过Web技术及独特算法实现在线刮刮卡功能，可用于各种在线抽奖的应用场景。【发明内容】
[0006] 本发明要解决的技术问题，在于提供一种基于浏览器的刮刮卡实现方法，其可以代替传统纸质刮刮卡，只要有内嵌浏览器即可，实现跨平台（windows、liunx、mac、ios、android、WindowsPhone等）、多设备接入。同时具有接入成本低、节约制造成本，保护环境等优点。
[0007] 本发明是这样实现的：
[0008] 基于浏览器的刮刮卡实现方法，包括如下步骤：
[0009] 步骤10、活动主办方向服务端提交活动信息；所述活动信息包括奖品信息，中奖几率，兑奖方式、活动时间及有效性说明；所述奖品信息包括奖品图片和奖品说明文字；
[0010] 步骤20、用户通过电子设备的浏览器访问服务端，提交用户信息，登陆服务端，若未注册用户信息，则先注册用户信息再登陆服务端；所述电子设备为具有多点触摸功能的设备；
[0011] 步骤30、登陆刮刮卡系统后，所述服务端返回刮刮卡界面；
[0012] 步骤40、用户在线使用刮刮卡，所述浏览器提交刮开的中奖信息；
[0013] 步骤50、服务端判断该刮开的中奖信息是否中奖，并将中奖结果返回浏览器，浏览器通知用户是否中奖，如果中奖，用户根据所述用户信息兑奖。
[0014] 进一步地，所述步骤30具体为：登陆刮刮卡系统后，显示刮刮卡界面时，浏览器向服务端发送数据请求，服务端根据活动主办方提交的活动信息生成该用户的中奖信息返回浏览器；浏览器加载完服务端返回的中奖信息后，将刮奖区清空，把中奖信息绘制在奖品信息层；所述中奖信息是图案或文字或图案与文字的结合，但均以图片为载体，记录在图片上；
[0015] 所述刮刮卡界面设有刮奖区，所述刮奖区由两个绘制层叠加组成，上层为涂刮层，下层为奖品信息层，且涂刮层完全覆盖奖品信息层，所述奖品信息层用于记录中奖信息，所述涂刮层用于遮盖奖品信息层及作为刮奖时奖品信息的重绘层；
[0016] 所述步骤40具体为：用户在线使用刮刮卡，其刮奖过程采用椭圆算法判断中奖信息是否被刮开，具体为：以所述中奖信息的载体的中心为原点，载体的长的一半为x轴、载体的宽的一半为y轴，形成一个椭圆区域，若手指不在所述椭圆区域内进行刮开操作，则不进行任何响应，若手指在所述椭圆区域内进行刮开操作，则判定中奖信息已被刮开；对于椭圆区域内的被刮开的区域采用模拟图章原理提高奖品图的绘制效率，所述模拟图章原理具体为：所述奖品信息层上对应于所述被所述被刮开的区域设置为拷贝区域，将涂刮层上对应于所述被刮开的区域设置为绘制区，将所述拷贝区域内的中奖信息仿制到绘制区，用户在刮开过程中，已拷贝过的区域不重复进行拷贝，实现真实模拟刮刮卡的刮开过程并提高绘制效率；
[0017] 用户手指在刮奖区进行刮开操作，当手指离开刮奖区域的时候，判断所述中奖信息是否已被刮开，如果已被刮开，则将中奖信息显示在椭圆区域；所述浏览器提交刮开的中奖信息，如果未被刮开，则不做响应；
[0018] 进一步地，所述步骤50具体为：服务端判断该刮开的中奖信息是否中奖并验证数据的合法性，并将中奖结果返回浏览器，浏览器通知用户是否中奖，如果中奖，用户根据所述用户信息兑奖。
[0019] 进一步地，所述服务端采用服务器集群和分布缓存技术架构解决高并发所带的性能瓶颈问题，具体为：所述服务端包括：Web应用服务群集、Redis Cache服务器群、触发服务器以及数据库服务器群，
[0020] 所述Web应用服务群集包括一LVS服务器和复数台Web应用服务器组成，所述LVS服务器根据IP负载均衡技术和基于内容分发技术，将来自浏览器的请求均衡地转移到各所述Web应用服务器上执行，所述Web应用服器采用Web Cache来缓存页面数据，从而提高页面的响应数据；
[0021] 所述Redis Cache服务器群是由一主Redis服务器和复数台从Redis服务器构成；
[0022] 所述数据库服务器群是由一主数据库服务器和复数台从数据库服务器构成；
[0023] 所述触发服务器从所述主数据库服务器获取数据，之后写入所述主Redis服务器；所述主Redis服务器接收来自各所述Web应用服务器和所述主数据库服务器的写入数据，并同步到所述从Redis服务器，所述主数据库服务器处理来自各所述应用服务器的数据写入及触发服务器的数据读取工作，并将数据同步到从数据库服务器，所述Web应用服务器的数据从所述从Redis服务器中读取。
[0024] 进一步地，所述步骤30中，运用html5的2D绘图技术把中奖信息绘制在奖品信息层，所述步骤40中，运用html5的2D绘图技术将所述拷贝区域内的中奖信息仿制到绘制区，从而实现了刮开的动画效果。
[0025] 进一步地，所述步骤30中，所述涂刮层上绘制有提示信息，运用html5的2D绘图技术将所述提示信息绘制在涂刮层。
[0026] 进一步地，所述刮刮卡界面还设有奖品展示区，所述奖品展示区用于显示抽奖规则及奖品图标、名称。
[0027] 进一步地，所述步骤30中，服务端根据活动主办方提交的活动信息采用预抽奖方式生成该用户的中奖信息返回浏览器；所述预抽奖方式具体为：预先生成该用户的中奖信息，在服务端记录该中奖信息中对应的奖品的临时中奖状态，只有在所述步骤40中，判定该中奖信息已被刮开，该中奖信息中对应的奖品才转正式中奖状态，该预抽奖方式解决了多用户高并发下重复抽奖问题。
[0028] 进一步地，所述电子设备包括：触屏手机、台式电脑、笔记本电脑或平板电脑。
[0029] 本发明具有如下优点：
[0030] 1、通过浏览器进行刮奖，实现刮刮卡网络化，既环保又经济；
[0031] 2、通过浏览器进行刮奖，实现刮刮卡跨平台多设备接入，具有覆盖面广，发行速度快的特点；
[0032] 3、采用服务端控制中奖算法，增强刮奖的可靠性、安全性；
[0033] 4、服务端通过采用服务器集群和分布缓存技术架构解决高并发所带的性能瓶颈问题；
[0034] 5、通过预抽奖方式解决高并发下重复抽奖的问题；
[0035] 6、通过模拟图章原理提高图像的绘制效率，实现刮刮卡特效；
[0036] 7、通过椭圆算法提高出奖的概率。【附图说明】
[0037] 下面参照附图结合实施例对本发明作进一步的说明。
[0038] 图1为本发明实施时刮刮卡装置的结构示意图。
[0039] 图2为本发明基于浏览器的刮刮卡实现方法的流程示意图。
[0040] 图3为本发明刮刮卡界面的结构示意图。
[0041] 图4为本发明服务端的结构示意图。【具体实施方式】
[0042] 请参阅图1，其为本发明实施时刮刮卡装置的结构示意图，图中客户端的电子设备可以是触屏手机、台式电脑、笔记本电脑或平板电脑。
[0043] 请参阅图2，基于浏览器的刮刮卡实现方法，包括如下步骤：
[0044] 步骤10、活动主办方向服务端提交活动信息；所述活动信息包括奖品信息，中奖几率，兑奖方式、活动时间及有效性说明；所述奖品信息包括奖品图片和奖品说明文字；
[0045] 步骤20、用户通过电子设备的浏览器访问服务端，提交用户信息，登陆服务端，若未注册用户信息，则先注册用户信息再登陆服务端；所述电子设备为具有多点触摸功能的设备；所述电子设备包括：触屏手机、台式电脑、笔记本电脑或平板电脑
[0046] 步骤30、登陆刮刮卡系统后，所述服务端返回刮刮卡界面；
[0047] 所述步骤30具体为：登陆刮刮卡系统后，显示刮刮卡界面时，浏览器向服务端发送数据请求，服务端根据活动主办方提交的活动信息采用预抽奖方式生成该用户的中奖信息返回浏览器，所述预抽奖方式具体为：预先生成该用户的中奖信息，在服务端记录该中奖信息中对应的奖品的临时中奖状态；浏览器加载完服务端返回的中奖信息后，将刮奖区清空，运用html5的2D绘图技术把中奖信息绘制在奖品信息层；所述中奖信息是图案或文字或图案与文字的结合，但均以图片为载体，记录在图片上；
[0048] 请参阅图3，所述刮刮卡界面设有刮奖区，所述刮奖区由两个绘制层叠加组成，上层为涂刮层，下层为奖品信息层，且涂刮层完全覆盖奖品信息层，所述奖品信息层用于记录中奖信息，所述涂刮层用于遮盖奖品信息层及作为刮奖时奖品信息的重绘层；所述涂刮层上绘制有提示信息，运用html5的2D绘图技术将所述提示信息绘制在涂刮层，所述刮刮卡界面还设有奖品展示区，所述奖品展示区用于显示抽奖规则及奖品图标、名称；
[0049] 步骤40、用户在线使用刮刮卡，所述浏览器提交刮开的中奖信息；
[0050] 所述步骤40具体为：用户在线使用刮刮卡，其刮奖过程采用椭圆算法判断中奖信息是否被刮开，具体为：以所述中奖信息的载体（所述载体即步骤30中所述的图片）的中心为原点，载体的长的一半为x轴、载体的宽的一半为y轴，形成一个椭圆区域，若手指不在所述椭圆区域内进行刮开操作，则不进行任何响应，若手指在所述椭圆区域内进行刮开操作，则判定中奖信息已被刮开，将该中奖信息中对应的奖品转正式中奖状态，该预抽奖方式解决了多用户高并发下重复抽奖问题；对于椭圆区域内的被刮开的区域采用模拟图章原理提高奖品图的绘制效率，所述模拟图章原理具体为：所述奖品信息层上对应于所述被所述被刮开的区域设置为拷贝区域，将涂刮层上对应于所述被刮开的区域设置为绘制区，运用html5的2D绘图技术将所述拷贝区域内的中奖信息仿制到绘制区，从而实现了刮开的动画效果。用户在刮开过程中，已拷贝过的区域不重复进行拷贝，实现真实模拟刮刮卡的刮开过程并提高绘制效率；
[0051] 用户手指在刮奖区进行刮开操作，当手指离开刮奖区域的时候，判断所述中奖信息是否已被刮开，如果已被刮开，则将中奖信息显示在椭圆区域；所述浏览器提交刮开的中奖信息，如果未被刮开，则不做响应；
[0052] 步骤50、服务端判断该刮开的中奖信息是否中奖，并将中奖结果返回浏览器，浏览器通知用户是否中奖，如果中奖，用户根据所述用户信息兑奖；
[0053] 所述步骤50具体为：服务端判断该刮开的中奖信息是否中奖并验证数据的合法性，并将中奖结果返回浏览器，浏览器通知用户是否中奖，如果中奖，用户根据所述用户信息兑奖。
[0054] 请参阅图4，在本实施例中，所述服务端采用服务器集群和分布缓存技术架构解决高并发所带的性能瓶颈问题，具体为：所述服务端包括：Web应用服务群集1、Redis Cache服务器群2（所述Redis是一个高性能的key-value数据库、所述Cache为高速缓存的意思，所述Redis Cache中文名称：高性能的键值对存储系统）、触发服务器3以及数据库服务器群4，[0055] 所述Web应用服务群集1包括一LVS(所述LVS的中文名称为Linux虚拟服务器)服务器11和复数台Web应用服务器12组成，所述Web应用服务群集1通过LVS服务器1实现一个具有高可用性特点的Web应用服务器负载均衡集群系统，该负载均衡集群系统可以提供与服务器节点的数量、性能成正比的负载能力，有效提高服务的吞吐量、可靠性、冗余度、适应性、性能价格比高。同时，LVS也是利用低端设备实现高端服务器性能的有效途径；
[0056] 所述LVS服务器11根据IP负载均衡技术和基于内容分发技术，将来自浏览器的请求均衡地转移到各所述Web应用服务器12上执行，所述Web应用服器12采用Web Cache来缓存页面数据，从而提高页面的响应数据；
[0057] 所述Redis Cache服务器群2是由一主Redis服务器21和复数台从Redis服务器22构成；
[0058] 所述数据库服务器群4是由一主数据库服务器41和复数台从数据库服务器42构成；
[0059] 所述触发服务器3从所述从数据库服务器42获取数据，之后写入所述主Redis服务器21；所述主Redis服务器21接收来自各所述应用服务器12和所述触发服务器3的写入数据，并同步到所述从Redis服务器22，所述主数据库服务器41处理来自各所述Web应用服务器12的数据写入工作，并将数据同步到从数据库服务器42，所述Web应用服务器12的数据从所述从Redis服务器22中读取。
[0060] 本发明通过浏览器进行刮奖，实现刮刮卡网络化且能够跨平台多设备接入，具有覆盖面广，发行速度快的特点；通过模拟图章原理提高图像的绘制效率，实现刮刮卡特效；通过椭圆算法提高出奖的概率。同时，通过服务端控制中奖算法，增强刮奖的可靠性、安全性；且服务端采用服务器集群和分布缓存技术架构解决高并发所带的性能瓶颈问题；服务端的预抽奖方式还能解决高并发下重复抽奖的问题。
[0061] 虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。
