js canvas实现橡皮擦效果

 function Lottery(node, cover, coverType, width, height, drawPercentCallback) { //node：canvas的id，cover：上面一层的图片地址，coverType：'image'or'color'，width：canvas宽, height：canvas高, drawPercentCallback：回调函数 //canvas this.conNode = node; this.background = null; this.backCtx = null; this.mask = null; this.maskCtx = null; this.lottery = null; this.lotteryType = 'image'; this.cover = cover || "#000"; this.coverType = coverType; this.pixlesData = null; this.width = width; this.height = height; this.lastPosition = null; this.drawPercentCallback = drawPercentCallback; this.vail = false; } Lottery.prototype = { createElement: function(tagName, attributes) { var ele = document.createElement(tagName); for (var key in attributes) { ele.setAttribute(key, attributes[key]); } return ele; }, getTransparentPercent: function(ctx, width, height) { var imgData = ctx.getImageData(0, 0, width, height), pixles = imgData.data, transPixs = []; for (var i = 0, j = pixles.length; i = 80) {//在大于等于80%的时候调用回调函数 if (typeof(_this.drawPercentCallback) == 'function') _this.drawPercentCallback(); } }, false); } else { _this.conNode.addEventListener("touchmove", function(e) { if (isMouseDown) { e.preventDefault(); } if (e.cancelable) { e.preventDefault(); } else { window.event.returnValue = false; } }, false); _this.conNode.addEventListener('touchend', function(e) { isMouseDown = false; var per = _this.getTransparentPercent(_this.maskCtx, _this.width, _this.height); if (per >= 80) {//在大于等于80%的时候调用回调函数 if (typeof(_this.drawPercentCallback) == 'function') _this.drawPercentCallback(); } }, false); } this.mask.addEventListener(clickEvtName, function(e) { e.preventDefault(); isMouseDown = true; var x = (device ? e.touches[0].pageX : e.pageX || e.x); var y = (device ? e.touches[0].pageY : e.pageY || e.y); _this.drawPoint(x, y, isMouseDown); }, false); this.mask.addEventListener(moveEvtName, function(e) { e.preventDefault(); if (!isMouseDown) return false; e.preventDefault(); var x = (device ? e.touches[0].pageX : e.pageX || e.x); var y = (device ? e.touches[0].pageY : e.pageY || e.y); _this.drawPoint(x, y, isMouseDown); }, false); }, drawLottery: function() { if (this.lotteryType == 'image') { var image = new Image(), _this = this; image.onload = function() { this.width = _this.width; this.height = _this.height; _this.resizeCanvas(_this.background, _this.width, _this.height); _this.backCtx.drawImage(this, 0, 0, _this.width, _this.height); _this.drawMask(); } image.src = this.lottery; } else if (this.lotteryType == 'text') { this.width = this.width; this.height = this.height; this.resizeCanvas(this.background, this.width, this.height); this.backCtx.save(); this.backCtx.fillStyle = '#FFF'; this.backCtx.fillRect(0, 0, this.width, this.height); this.backCtx.restore(); this.backCtx.save(); var fontSize = 30; this.backCtx.font = 'Bold ' + fontSize + 'px Arial'; this.backCtx.textAlign = 'center'; this.backCtx.fillStyle = '#F60'; this.backCtx.fillText(this.lottery, this.width / 2, this.height / 2 + fontSize / 2); this.backCtx.restore(); this.drawMask(); } }, drawMask: function() { if (this.coverType == 'color') { this.maskCtx.fillStyle = this.cover; this.maskCtx.fillRect(0, 0, this.width, this.height); this.maskCtx.globalCompositeOperation = 'destination-out'; } else if (this.coverType == 'image') { var image = new Image(), _this = this; image.onload = function() { _this.resizeCanvas(_this.mask, _this.width, _this.height); var android = (/android/i.test(navigator.userAgent.toLowerCase())); _this.maskCtx.globalAlpha = 1;//上面一层的透明度，1为不透明 _this.maskCtx.drawImage(this, 0, 0, this.width, this.height, 0, 0, _this.width, _this.height); //---以下一段为在上面一层上写字 // var fontSize = 50; // var txt = '123123'; // var gradient = _this.maskCtx.createLinearGradient(0, 0, _this.width, 0); // gradient.addColorStop("0", "#fff"); // gradient.addColorStop("1.0", "#000"); // _this.maskCtx.font = 'Bold ' + fontSize + 'px Arial'; // _this.maskCtx.textAlign = 'left'; // _this.maskCtx.fillStyle = gradient; // _this.maskCtx.fillText(txt, _this.width / 2 - _this.maskCtx.measureText(txt).width / 2, 100); // _this.maskCtx.globalAlpha = 1; _this.maskCtx.globalCompositeOperation = 'destination-out'; } image.src = this.cover; } }, init: function(lottery, lotteryType) { if (lottery) { this.lottery = lottery; this.lottery.width = this.width; this.lottery.height = this.height; this.lotteryType = lotteryType || 'image'; this.vail = true; } if (this.vail) { this.background = this.background || this.createElement('canvas', { style: 'position:fixed;top:0;left:0;background-color:transparent;' }); } this.mask = this.mask || this.createElement('canvas', { style: 'position:fixed;top:0;left:0;background-color:transparent;' }); this.mask.style.zIndex = 20; if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) { if (this.vail) this.conNode.appendChild(this.background); this.conNode.appendChild(this.mask); this.bindEvent(); } if (this.vail) this.backCtx = this.backCtx || this.background.getContext('2d'); this.maskCtx = this.maskCtx || this.mask.getContext('2d'); if (this.vail) this.drawLottery(); else this.drawMask(); var _this = this; window.addEventListener('resize', function() { _this.width = document.documentElement.clientWidth; _this.height = document.documentElement.clientHeight; _this.resizeCanvas_w(_this.mask, _this.width, _this.height); }, false); } }