canvas实现刮奖功能

素颜马尾好姑娘i 2024-02-20 12:37 61阅读 0赞

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

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

### 效果图 ###

![在这里插入图片描述][9652f781685947a28f4055a400bfa4db.gif_pic_center]

### 源代码 ###

<!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>

[9652f781685947a28f4055a400bfa4db.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/be6adc6271ab409aa86f174376b0fd64.png