博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
canvas刮奖
阅读量:4518 次
发布时间:2019-06-08

本文共 1959 字,大约阅读时间需要 6 分钟。

(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;

});

转载于:https://www.cnblogs.com/Super-scarlett/p/9209148.html

你可能感兴趣的文章
枚举也能直接转换为对应的数值输出
查看>>
angularjs1-7,供应商
查看>>
BitSet
查看>>
Spring常用注解,自动扫描装配Bean
查看>>
(转载)深入理解WeakHashmap
查看>>
JAVA中的数组
查看>>
爬虫—使用Requests
查看>>
scrollIntoView()窗口滚动
查看>>
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
查看>>
使用ansible远程管理集群
查看>>
读jQuery源码释疑笔记3
查看>>
手把手教你jmeter压测--适合入门
查看>>
Sequelize+MySQL存储emoji表情
查看>>
RabbitMQ学习之Publish/Subscribe(3)
查看>>
[SCOI2010]生成字符串
查看>>
JLOI2015 城池攻占
查看>>
在 Azure 虚拟机上快速搭建 MongoDB 集群
查看>>
跑步运动软件调研
查看>>
搭建ntp时间服务器 ntp - (Network Time Protocol)
查看>>
35. Search Insert Position
查看>>