html5 canvas制作刮刮卡

下班后，闲着无事，刚好近期在学习画布相关知识，就写了个刮刮卡的demo练一下手，兼容安卓、IOS哦。高手路过，多多指点！

刮刮卡实现原理：

通过canvas绘制一个图片，用户手指触发屏幕时，刮开当前一部分封面图，从而显示正文中的内容。整体运用canvas的globalCompositeOperation属性来实现，关于globalCompositeOperation的用法，有不熟悉的，可以去这里查看。

简单介绍一下页面整体结构：

1 <div class="wrap">
2 　　<canvas class="page can" id="can" width="640" height="1136"></canvas>
3 　　<div class="page index"><img src="data:images/1.jpg" /></div>
4 </div>

样式：

1 html,body { margin: 0; height: 100%; }
2 .wrap { width: 640px; height: 100%; margin: 0 auto; position: relative; overflow: hidden; }
3     .page { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
4     .can { z-index: 3; }
5     .index img { width: 100%; height: 100%; }

引用JS：

下面，详细介绍一下关于scratch.js的具体实现思路与方法：

通过JS闭包引用：

;(function($){　　//主体代码　　//...})(jQuery);

首先，定义默认参数：

1 //默认参数
2     var defaults = {
3         lineWidth: 50,                //笔触宽度
4         percent: '0.6',               //刮开范围
5         slideImg: 'images/2.jpg',     //封面图
6         callback: function(){         //刮开后回调函数
7             alert('你太棒了，么么哒！')
8         }
9     };

核心逻辑：

说明：刮刮卡效果是借助canvas自身的属性来编写的，所以需要先获取页面中canvas对象，并创建2d绘图环境。

var can = ths.get(0).getContext('2d');

然后，创建image对象，img加载成功后，调用canvas的drawImage方法，绘制封面图，并设置绘制的属性，注意下文标部分代码：

 1 var img = new Image();                                  //创建图片对象
 2                 img.src = slideImg;                                     //添加路径
 3                 img.onload = function(){                                //图片加载完成，调用下面方法
 4                     can.drawImage(img, (640-wid)/2, 0, wid, hei);       //绘制图片
 5                     can.strokeStyle = 'gray';                           //绘制颜色
 6                     can.lineWidth = lineWidth;                          //线宽
 7                     can.lineCap = 'round';                              //样式
 8                     can.globalCompositeOperation = 'destination-out';   //利用两图相交取透明的原理
 9                     //绘制完成，调用刮卡事件
10                     slide(ths, can);
11                 }

下面是slide方法，主要判断手势、绘制路径与刮开层等效果。当touchend时，计算划开像素点，目标设置为刮开60%时，封面图自动消失。注意下面标注部分代码：

 1 function slide(o,c){
 2                     o.on('touchstart', function(e){
 3                         var e = e||e.event;
 4                         var tou = e.originalEvent.changedTouches[0];
 5                         var x = tou.pageX - $(this).offset().left;
 6                         var y = tou.pageY - $(this).offset().top;
 7
 8                         if(flag){
 9                             flag = false;
10                             c.moveTo(x, y);
11                             c.lineTo(x+1, y+1);
12                         }else{
13                             c.lineTo(x+1, y+1);
14                         }
15                         c.stroke();
16
17                         o.on('touchmove.mo', function(e){
18                             var e = e||e.event;
19                             var tou = e.originalEvent.changedTouches[0];
20                             var x = tou.pageX - $(this).offset().left;
21                             var y = tou.pageY - $(this).offset().top;
22
23                             c.lineTo(x+1, y+1);
24                             c.stroke();
25                         })
26
27                         o.on('touchend.mo', function(e){
28                             var imgData = c.getImageData(0, 0, 640, hei);
29                             var aPx = imgData.width * imgData.height;
30                             var num = 0;
31                             for(var i=0; i<aPx; i++){
32                                 if(imgData.data[4*i+3] == 0){
33                                     num++;
34                                 }
35                             }
36
37                             if(num>aPx*percent){
38                                 o.animate({opacity: 0}, 1000, function(){
39                                     $(this).remove();
40
41                                     callback();
42                                 })
43                             }
44
45                             o.off('.mo');
46                         })
47
48                     })
49
50                 }

至此，整个刮刮功能已讲解完毕，感兴趣的童鞋赶快试一试吧！如有问题，可以通过QQ（863139978）联系。

转载于:https://www.cnblogs.com/front-end/p/4787108.html

html5 canvas制作刮刮卡相关推荐

html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
html5怎么做出旋转效果,HTML5+Canvas制作的幻彩旋转圆盘特效
HTML5+Canvas制作的幻彩旋转圆盘特效 body { background: #000; color: #aaa; font: 100%/20px helvetica; } canvas { ...
使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
html5刮奖效果,HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理原理很简单,就是在刮奖区添加两个canvas, ...
html制作windows桌面,用html5 canvas制作Windows7桌面图片
手把手教你用html5制作canvas制作Windows7桌面图片,看起来好高大上哈.这里主要是要突出制作一张Windows7桌面图片使用的工具很简单,也不是真正的手把手,因为这方面实在不是强项.用n ...

html5 canvas制作刮刮卡

html5 canvas制作刮刮卡相关推荐

最新文章

热门文章