canvas刮奖
(function (global, factory) {
typeof module === 'object' && typeof module.exports === 'object' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.cavns = factory(global);
})(this, function () {
var cavns = {
position:{
oLeft:"",
oTop:""
},
ctx:"",
init : function(n){
var pic = new Image();
//pic.src ="images/lottery/lottery.png";
var src = document.getElementById("lotpng").src;
pic.src = src;
pic.onload = function(){
var canvas = document.getElementById("canvas");
cavns.ctx = canvas.getContext("2d");
cavns.ctx.beginPath();
cavns.ctx.drawImage(pic,0,0,300,180);
/*this.ctx.fillStyle = 'rgba(0,0,0, 0.5)'*/;
/*this.ctx.fillRect(0, 0, canvas.width, canvas.height);*/
cavns.ctx.closePath();
var arr = cavns.getOffset(canvas);
cavns.position.oLeft = arr[0];
cavns.position.oTop = arr[1];
}
},
getOffset:function(obj){
var valLeft = 0,valTop = 0;
function get(obj){
valLeft += obj.offsetLeft;
valTop += obj.offsetTop;
/* 不到最外层就一直调用,直到offsetParent为body*/
if (obj.offsetParent.tagName!='BODY') {
get(obj.offsetParent);
}
return [valLeft,valTop];
}
return get(obj);
},
touchstart : function(){
this.ctx.beginPath();
this.ctx.lineWidth = 25;
this.ctx.globalCompositeOperation = 'destination-out';
this.ctx.moveTo(event.touches[0].pageX-cavns.position.oLeft, event.touches[0].pageY-cavns.position.oTop);
},
touchmove : function(){
/* 根据手指移动画线,使之变透明*/
this.ctx.lineTo(event.touches[0].pageX-cavns.position.oLeft, event.touches[0].pageY-cavns.position.oTop);
/* 填充*/
this.ctx.stroke();
},
touchend : function(fn){
/* 获取imageData对象*/
var imageDate = this.ctx.getImageData(0, 0, canvas.width, canvas.height);
/* */
var allPX = imageDate.width * imageDate.height;
var iNum = 0; //记录刮开的像素点个数
for (var i = 0; i < allPX; i++) {
if (imageDate.data[i * 4 + 3] == 0) {
iNum++;
}
}
if (iNum >= allPX * 1 / 20) {
typeof fn == 'function' && fn();
}
}
}
return cavns;
});
canvas刮奖的更多相关文章
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- canvas写的一个刮奖效果
<!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X ...
- HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...
- canvas刮刮乐效果(pc端&H5、zepto-touchmove)
一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- canvas刮刮乐和画笔
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...
- H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- canvas刮刮乐
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...
- HTML5实现刮奖效果
原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
随机推荐
- JVM总结-invokedynamic
前不久,“虚拟机”赛马俱乐部来了个年轻人,标榜自己是动态语言,是先进分子. 这一天,先进分子牵着一头鹿进来,说要参加赛马.咱部里的老学究 Java 就不同意了呀,鹿又不是马,哪能参加赛马. 当然了,这 ...
- SOA, EDA, 和 ESB
SOA----面向服务架构,实际上强调的是软件的一种架构,一种支撑软件运行的相对稳定的结构,表面含义如此,其实SOA是一种通过服务整合来解决系统集成的一种思想.不是具体的技术,本质上是一种策略.思想. ...
- 企业项目构建学习(一)maven
<mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...
- linux中ps命令
ps的参数 -C的使用 [root@centos7 ~]# ps -C nginx -o user,pid,comm USER PID COMMAND root 2697 nginx nginx 26 ...
- 1950261 - SAP HANA Database Backup Policy Recommendations and Regular Backup Script
=====Symptom For SAP Business One, version for SAP HANA users, SAP HANA provides a range of database ...
- python3中最新百度首页弹窗的登录方法
from selenium import webdriverimport timedriver = webdriver.Ie()driver.get("http://www.baidu.co ...
- JSP-打印动态表格
input.html <script language="javascript"> function validate(f){ if(!(/\w+/.test(f.in ...
- 恺撒密码 I Python实现
'''恺撒密码 I描述凯撒密码是古罗马凯撒大帝用来对军事情报进行加解密的算法,它采用了替换方法对信息中的每一个英文字符循环替换为字母表序列中该字符后面的第三个字符,即,字母表的对应关系如下:原文:A ...
- Xpath选择、操作web元素
11月6日 xpath选择 XPath(XML Path Language)是W3C(World Wide Web Consortium)定义的用来在XML文档中选择节点的语言, 主浏览器也支持XPa ...
- Vue.js学习和第一个实例
第一个实例效果图: 1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.下载Vue.js.链接:http://pan. ...