最近做了个情人节表白的项目,表白内容时被遮盖的,刮开后才能显示,并且刮开一定比例后清空所有遮罩。
  function guaguale(obj,w,h){//obj时canvas元素
var canva2D=obj.getContext("2d");
var src = "cover.png";//设置遮罩图片
var img = new Image();
img.src=src;
img.onload = function() {//图片加载完成后渲染
canva2D.drawImage(img, 0, 0, w, h);
}
function lottery(x,y,c){//清除以(x,y)为中心的四周边长20px的正方形的遮罩,c时canvas对象
c.clearRect(x-10,y-10,20,20);
}
obj.addEventListener('touchmove',function(event){
if(event.targetTouches.length == 1){//一个手指才能刮
event.preventDefault();// 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
var canavOffest = $(obj).offset();//获取元素到屏幕两边的距离
var canvX=Math.floor(touch.pageX - canavOffest.left);//手指到canvas元素左边的距离
var canvY=Math.floor(touch.pageY-canavOffest.top); //手指到canvas元素上边的距离
lottery(canvX,canvY,canva2D);
}
},false);
obj.addEventListener('touchend',function(event){//每次手指离开canvas时计算刮开的比例
event.preventDefault();// 阻止浏览器默认事件,重要
var data = canva2D.getImageData(0, 0, w, h).data,//获取整个canvas的元素点
scrapeNum = 0,area = w * h;
for(var i = 3, len = data.length; i < len; i += 4){
if(data[i] === 0){
scrapeNum ++;
}
}
if(scrapeNum > area * 0.5){//达到一定比例后清除所有
canva2D.clearRect(0, 0, w, h);
}
},false); }
最简单的文字及代码解答复杂的功能,不做多余的文字,如有疑问之处,请留言互相交流学习,本人也在爬坑中。

利用canvas实现刮刮乐效果的更多相关文章

  1. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  2. 【Android界面实现】使用Canvas对象实现“刮刮乐”效果

    在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...

  3. canvas刮刮乐效果(pc端&H5、zepto-touchmove)

    一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...

  4. 游戏的套路你知道吗? H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  5. H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  6. canvas刮刮乐

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  7. HTML5 简单实现刮刮乐效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  9. [cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)

    [转]http://blog.csdn.net/realcrazysun1/article/details/42393629 本文基于cocos2d-js 3.0版本引擎开发 RenderTextur ...

随机推荐

  1. CentOS 7 用户及权限管理

    用户及组的管理: 安全上下文: 进程以其发起者的身份运行: 进程对文件的访问权限,取决于发起此进程的用户的权限 系统用户:为了能够让那些后台进程或服务类进程以非管理员的身份运行,通常需要为此创建多个普 ...

  2. VB6 二维数组去重实现

    关于VB6的二维数组去重算法实现 当然,这里还是有局限性,当我们的数组被填满了各个不同的值时,例如下方 700*700 = 490000 就要While49万次,这谁受得了? 所以以下仅适合小规模使用 ...

  3. es 服务器搭建

    安装jdk,原系统安装的openjava 参考https://www.cnblogs.com/Dylansuns/p/6974272.html注意配置/etc/profile 时,要注意自己安装的是哪 ...

  4. nginx日志 logrotate配置

    nginx 日志 logrotate配置如下: /var/log/nginx/*.log { daily missingok rotate 20 compress delaycompress noti ...

  5. NE76003单片机调试DS18B20 步骤

    一.硬件部分 GND脚接地: DQ脚接P03,外加4K7上拉电阻: VCC脚接3.3v供电: 二.软件部分 1.配置P03为准准双向 IO类型: void Init_power_gpio(void){ ...

  6. 实现硬件PWM控制电机旋转和通过编码器计算所转圈数的简单例程

    该例程所用的硬件设备: 直流电机驱动模块YYH-LWZ: H桥 大功率 正反转 刹车 PWM 调速 5/12/24V 12V直流减速电机JGB37-520B:ASLONG JGB37-520B编码器减 ...

  7. [原创] debian 9.3 搭建seafile企业私有网盘

    [原创] debian 9.3 搭建seafile企业私有网盘 需求是这样的, 个人疲惫于 "成为大伙的文件中转站" ,公司不管大大小小的文件,都要打电话过来“转个xx文件”.“帮 ...

  8. python内置函数 和模块函数总结

    1.内置函数(无需导入)long() 函数将数字或字符串转换为一个长整型.len() 统计元素个数print() 打印,输出input() 输入,或阻塞程序运行type 获取类型range 产生连续的 ...

  9. Dapper查询返回Datatable

    dapper封装的扩展方法中,没有直接返回datatable的方法,项目中有些时候需要用到这样的返回格式,而为了项目数据框架的统一性, 不好直接用其他框架,如果直接将查询出来的泛型集合转datatab ...

  10. 20175314 实验三 敏捷开发与XP实践

    20175314 实验二 Java面向对象程序设计 一.实验内容 XP基础 XP核心实践 相关工具 二.实验步骤 (一)代码格式化 创建"175314.exp3"项目,在该项目下创 ...