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

本文共 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

你可能感兴趣的文章
有关 Windows Lite 的一切,只为对抗 Chrome OS?
查看>>
Android 自定义控件之SlidingMenuVertical顶部悬浮(垂直折叠抽屉,有滑动渐变回调,可自行添加渐变动画)...
查看>>
NG-ZORRO 7.0.1 发布,Ant Design 的 Angular 实现
查看>>
Django 2.0 model on_delete错误小记
查看>>
ffmpeg中的sws_scale算法性能测试
查看>>
新浪微博技术分享:微博实时直播答题的百万高并发架构实践
查看>>
Groovy 处理JSON
查看>>
JEESZ分布式框架简介
查看>>
scala笔记(三)
查看>>
java线程池的原理学习(三)
查看>>
自己编写jQuery插件 之 无缝滚动
查看>>
Java笔记-Comparable 和 Comparator比较
查看>>
小米组织架构巨变的背后,是雷军战争思维的映射
查看>>
不满公司袒护男高管,谷歌 200 女工程师发起罢工运动
查看>>
快速上手物联网解决方案(5)—— DataV
查看>>
Apache NetBeans 11.0 正式发布,支持 Java 12
查看>>
解决拦截器对ajax请求的的拦截
查看>>
View的三次measure,两次layout和一次draw
查看>>
PostgreSQL流复制热备
查看>>
行业看点 | 超高性能量子计算机现身,成解析复杂算法大杀器
查看>>