刮刮樂移動端插件

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');
            }
       });