canvas实现刮奖功能

本文主要是介绍canvas实现刮奖功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

canvas刮奖原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个canvas用于显示涂层，可以用一张图片或用纯色填充，第二个canvas覆盖在第一个canvas上面。

当在第二个canvas上点击或涂抹（点击然后拖动鼠标）时，把点击区域变为透明，这样就可以看到第一个canvas上的内容，即实现了刮奖效果。

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>_直接复制网</title>
<meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<style>
#lotteryContainer {position:relative;width: 300px;height:100px;
}
#drawPercent {color:#F60;
}
</style>
</head>
<body>
<button id="freshBtn">刷新</button><label>已刮开 <span id="drawPercent">0%</span> 区域。</label>
<div id="lotteryContainer"></div><script>
function Lottery(id, cover, coverType, width, height, drawPercentCallback) {this.conId = id;this.conNode = document.getElementById(this.conId);this.cover = cover;this.coverType = coverType;this.background = null;this.backCtx = null;this.mask = null;this.maskCtx = null;this.lottery = null;this.lotteryType = 'image';this.width = width || 300;this.height = height || 100;this.clientRect = null;this.drawPercentCallback = drawPercentCallback;
}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 < j; i += 4) {var a = pixles[i + 3];if (a < 128) {transPixs.push(i);}}return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);},resizeCanvas: function (canvas, width, height) {canvas.width = width;canvas.height = height;canvas.getContext('2d').clearRect(0, 0, width, height);},drawPoint: function (x, y) {this.maskCtx.beginPath();var radgrad = this.maskCtx.createRadialGradient(x, y, 0, x, y, 30);radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)');this.maskCtx.fillStyle = radgrad;this.maskCtx.arc(x, y, 30, 0, Math.PI * 2, true);this.maskCtx.fill();if (this.drawPercentCallback) {this.drawPercentCallback.call(null, this.getTransparentPercent(this.maskCtx, this.width, this.height));}},bindEvent: function () {var _this = this;var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));var clickEvtName = device ? 'touchstart' : 'mousedown';var moveEvtName = device? 'touchmove': 'mousemove';if (!device) {var isMouseDown = false;document.addEventListener('mouseup', function(e) {isMouseDown = false;}, false);} else {document.addEventListener("touchmove", function(e) {if (isMouseDown) {e.preventDefault();}}, false);document.addEventListener('touchend', function(e) {isMouseDown = false;}, false);}this.mask.addEventListener(clickEvtName, function (e) {isMouseDown = true;var docEle = document.documentElement;if (!_this.clientRect) {_this.clientRect = {left: 0,top:0};}var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;_this.drawPoint(x, y);}, false);this.mask.addEventListener(moveEvtName, function (e) {if (!device && !isMouseDown) {return false;}var docEle = document.documentElement;if (!_this.clientRect) {_this.clientRect = {left: 0,top:0};}var x = (device ? e.touches[0].clientX : e.clientX) - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;var y = (device ? e.touches[0].clientY : e.clientY) - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;_this.drawPoint(x, y);}, false);},drawLottery: function () {this.background = this.background || this.createElement('canvas', {style: 'position:absolute;left:0;top:0;'});this.mask = this.mask || this.createElement('canvas', {style: 'position:absolute;left:0;top:0;'});if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) {this.conNode.appendChild(this.background);this.conNode.appendChild(this.mask);this.clientRect = this.conNode ? this.conNode.getBoundingClientRect() : null;this.bindEvent();}this.backCtx = this.backCtx || this.background.getContext('2d');this.maskCtx = this.maskCtx || this.mask.getContext('2d');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.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() {this.resizeCanvas(this.mask, this.width, this.height);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.maskCtx.drawImage(this, 0, 0);_this.maskCtx.globalCompositeOperation = 'destination-out';}image.src = this.cover;}},init: function (lottery, lotteryType) {this.lottery = lottery;this.lotteryType = lotteryType || 'image';this.drawLottery();}
}window.onload = function () {var lottery = new Lottery('lotteryContainer', '#CCC', 'color', 300, 100, drawPercent);lottery.init('http://www.baidu.com/img/bdlogo.gif', 'image');document.getElementById('freshBtn').onclick = function() {drawPercentNode.innerHTML = '0%';lottery.init(getRandomStr(10), 'text');}var drawPercentNode = document.getElementById('drawPercent');function drawPercent(percent) {drawPercentNode.innerHTML = percent + '%';}
}function getRandomStr(len) {var text = "";var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for( var i=0; i < len; i++ )text += possible.charAt(Math.floor(Math.random() * possible.length));return text;
}
</script>
</body>
</html>