刮刮乐移动端插件

2019独角兽企业重金招聘Python工程师标准>>>

js代码

(function(win, doc) {
	var defaultSettings = {};

	function Rasoir(options) {
		var self = this;
		//没传配置项自己丢错
		if(!options) {
			throw new Error("请传入配置参数");
		}
		self = Object.assign(self, defaultSettings, options);

		self.canvas = doc.querySelector(self.canvas) || doc.querySelectorAll(self.canvas);
		self._setGgl(this);
	}

	Rasoir.prototype = {
		_setGgl: function(self) {
			var canvas = this.canvas;
			var ctx = canvas.getContext('2d');
			/* 画布偏移量，下面用到的时候再介绍*/
			var arr = getOffset(canvas);
			var oLeft = arr[0];
			var oTop = arr[1];
			/* 初始化画布*/
			ctx.beginPath();
			ctx.fillStyle = '#ccc';
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.closePath();
			/* 增加触摸监听*/
			document.addEventListener("touchstart", function() {
				/* 初始化画笔*/
				ctx.beginPath();
				/* 画笔粗细*/
				ctx.lineWidth = 30;
				/* 设置组合效果*/
				ctx.globalCompositeOperation = 'destination-out';
				/* 移动画笔原点*/
				ctx.moveTo(event.touches[0].pageX - oLeft, event.touches[0].pageY - oTop);
			}, false);
			document.addEventListener("touchmove", function() {
				/* 根据手指移动画线，使之变透明*/
				ctx.lineTo(event.touches[0].pageX - oLeft, event.touches[0].pageY - oTop);
				/* 填充*/
				ctx.stroke();
			});
			/* 之所以会用到下面的那个函数getOffset（obj）
			 * 是因为event.touches[0].pageX、pageY获取的是相对于可视窗口的距离
			 * 而lineTo画笔的定位是根据画布位置定位的
			 * 所以就要先获取到画布(canvas)相对于可视窗口的距离，然后计算得出触摸点相对于画布的距离 
			 * */
			/* 获取该元素到可视窗口的距离*/
			function getOffset(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);
			}

			document.addEventListener("touchend", function() {
				/* 获取imageData对象*/
				var imageDate = 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 * 3 / 4) {
					// disappear里面写了缓慢清除的css3动画效果
					canvas.setAttribute('class', 'disappear');
					self.endFun(); // 涂层刮完执行函数
				}
			}, false);
		}
	}
	win.Rasoir = Rasoir;
})(window, document);

css 代码

.ggl-container {
				width: 100%;
				height: auto;
			}
			
			.ggl-canvasBox {
				width: 100%;
				height: auto;
				background-color: #FFF;
				text-align: center;
				position: relative;
				margin: 20px 0;
			}
			.ggl-container canvas {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background-color: transparent;
			}
			
			.disappear {
				-webkit-animation: disa 2s 1;
				animation: disa 2s 1;
				-webkit-animation-fill-mode: forwards;
				-moz-animation-fill-mode: forwards;
				-o-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
			}
			
			@keyframes disa {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}

html 元素

<!-- 大的背景盒子-->
		<div class="ggl-container">
			<!-- 定位的盒子-->
			<div class="ggl-canvasBox">
				<!-- 放内容的盒子-->
				<div>
					新年快乐
				</div>
				<!-- 蒙版画布-->
				<canvas id="canvas"></canvas>
			</div>
		</div>

js 调用

var rasoir = new Rasoir({
            canvas: "#canvas", // canvas 选择器
            endFun: function(){
            	alert('end');
            }
       });

 

转载于:https://my.oschina.net/u/3460260/blog/1845147