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;
});
最新文章
- Makefile---make内嵌函数及make命令显示 （九）
- mysql InnoDB 索引小记
- google protobuf 使用示例
- innodb b+树
- 学习Swift--方法
- 真机测试---iOS证书(.p12)和描述文件(.mobileprovision)
- UCTF Final-Hackventure
- POJ 3259 Wormholes( bellmanFord判负环）
- html5权威指南：嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式
- 第3阶段——内核启动分析之start_kernel初始化函数(5)
- Centos 使用yum安装MongoDB 4.0
- Day8 信号检测与估值
- 1006 Tick and Tick
- git 服务器搭建及提交代码检查
- POJ3304 Segments 【线段直线相交】
- 95% CI, 置信区间 Confidence Interval
- JVM 专题
- 通过注解实现一个简易的Spring mvc框架
- 【Scrapy】关于使用Scrapy框架爬虫遇到的问题1
- nginx支持ssl双向认证配置