canvas刮奖

标签：factor   ati   port   page   fse   turn   getc   画线   app   

(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刮奖

标签：factor   ati   port   page   fse   turn   getc   画线   app   

原文地址：https://www.cnblogs.com/Super-scarlett/p/9209148.html