最近做了个情人节表白的项目,表白内容时被遮盖的,刮开后才能显示,并且刮开一定比例后清空所有遮罩。
  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. ASE存储过程和IQ存储过程的常见区别(附例子)

    ASE存储过程和IQ存储过程的常见区别(附例子) 1 存储过程简介 存储过程(Stored Procedure)是为了完成特定的功能而汇集成一组的SQL语句集,并为该组SQL语句命名.经编译后存储在S ...

  2. css 之过渡效果

    之前写css的效果,都是使用js 来完成的,但是写js比较耗费时间,有时候逻辑不对,还出不来效果,所以也比较烦:所以一些简单的效果,就使用css 来完成会比较好一些,不必耗费太多的精力: 但是写css ...

  3. python视频学习笔记2(if)

    一.if语句1.比较运算符,if语句语法 # 1. 输入用户年龄# 2. 判断是否满 18 岁 (**>=**)# 3. 如果满 18 岁,允许进网吧嗨皮# 4. 如果未满 18 岁,提示回家写 ...

  4. spring mvc 框架校验常用注解

    @AssertFalse 被注解的元素必须为false@AssertTrue 被注解的元素必须为false@DecimalMax(value) 被注解的元素必须为一个数字,其值必须小于等于指定的最小值 ...

  5. Xamarin.Form与Xamarin.Android或Xamarin.IOS的区别简述

    Xamarin.Form与Xamarin.Android或Xamarin.IOS的区别简述: 可能刚刚接触Xamarin的人来说,对于这个概念比较的模糊,认为这说的不都是同一个东西吗?事实并不是这样的 ...

  6. Java框架spring 学习笔记(六):属性注入

    属性注入:创建对象的时候,向类里面的属性设置值. Java属性注入有三种方法: 使用set方法注入 有参数构造注入 使用接口注入 Spring框架里面的属性注入方式 有参数构造属性注入 set方法属性 ...

  7. CodeWarrior 10 配置Jlint初始化文件

    新建一个项目之后,飞思卡尔的仿真器的配置不如德州仪器那么简单.他需要一些配置. 当我们新建一个工程后,可以采取如下步骤配置Jlint: 1.右击工程名,选择属性. 2.在Run/Debug Setti ...

  8. 安装mysql数据库出现错误"系统找不到指定文件"

    http://blog.csdn.net/Marvel__Dead/article/details/63262641?locationNum=4&fps=1

  9. 2018-2019-2 20165315《网络攻防技术》Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165315<网络攻防技术>Exp6 信息搜集与漏洞扫描 目录 一.实验内容 二.实验步骤 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 3.基本的扫 ...

  10. CentOS7 查看显卡信息

    A卡: [root@t1 ~]# lspci | grep -i vga 00:02.0 VGA compatible controller: Cirrus Logic GD 5446 N卡: [ro ...