刮刮卡，支持多个刮刮卡，擦除效果，手机端， 2020草莓升磅

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<link rel="stylesheet" href="css/guaguaka.css">
</head>
<body>
    <div class="sec sec-main">
                    <div class="row row1">
                        <div class="guaguaka" ontouchmove="return false;">
                            <img src="images/dot.png" class="imageBackground" style="display: none;" alt="">
                            <img src="images/guagua-cover.png" class="pictureOver" style="display: none;" alt="">
                            <!--刮刮卡-->
                            <div class="scratch_container">
                                <div class="scratch_viewport">
                                    <!-- result picture -->
                                    <canvas id="js-canvas0"></canvas>
                                </div>
                            </div>
                            <div class="youhuiquan">+<span class="money">?</span>元升磅</div>
                            <div class="shou shoudong"></div>
                        </div>
                    </div>
                    <div class="row row1">
                        <div class="guaguaka" ontouchmove="return false;">
                            <img src="images/dot.png" class="imageBackground" style="display: none;" alt="">
                            <img src="images/guagua-cover2.png" class="pictureOver" style="display: none;" alt="">
                            <!--刮刮卡-->
                            <div class="scratch_container">
                                <div class="scratch_viewport">
                                    <!-- result picture -->
                                    <canvas id="js-canvas1"></canvas>
                                </div>
                            </div>
                            <div class="youhuiquan">+<span class="money">?</span>元升磅</div>
                            <div class="shou shoudong"></div>
                        </div>
                    </div>
       </div>
       <script src="js/jquery.min.js"></script>
       <script src="js/guaguaka.js"></script>
       <script>
    function guaguaEnd(ele){
        console.log("擦除结束"+ele);
    }

    var arr = [40,48,50,58];

    var money = [];
    $(".row").each(function (i) {
        var self = $(this);
        money.push(arr[Math.floor(Math.random()*(3-0+1))+0]);
        /*刮刮卡*/
        var imageBackground=$(this).find(".imageBackground").attr("src");   /*刮开之后的底图*/
        var pictureOver=$(this).find(".pictureOver").attr("src");  /*覆盖图*/
        var canvasId=$(this).find('js-canvas'+i).selector;
        var scratch = new Scratch({
            canvasId: 'js-canvas'+i,
            imageBackground: imageBackground,
            pictureOver: pictureOver,
            cursor: {
                x: '-20',
                y: '-20'
            },
            radius: 20,
            nPoints: 1000,
            percent: 30,
            pointSize: { x: 5, y: 5},
            callback: function () {/*刮刮之后的函数*/
                self.find(".scratch_container").fadeOut(100);
                self.find(".sb").html(money[i]);
                self.find(".money").html(money[i]);
                self.find(".buy_btn").attr("data-money",money[i]);
                self.find(".shou").fadeOut(100);
                guaguaEnd(canvasId);
            }
        });
    });
</script>
</body>
</html>

css

.sec-main  {}
.row {position: relative;  margin: 20px auto;}
.guaguaka {
position: relative;
top: 0;
left: 0;
width: 302px;
height: 60px;
z-index: 90; }
.scratch_container {
position: absolute;
top: 0;
left: 0;
width: 302px;
height: 60px; }
.scratch_viewport {
position: relative;
width: 302px;
height: 60px;
margin: 0 auto;
z-index: 0; }
.scratch_picture-under {
width: 302px;
height: 60px;
position: absolute;
top: 0;
left: 0;
display: block;
z-index: -1; }
.scratch_container canvas {
position: relative;
width: 302px;
height: 60px;
z-index: 1; }
.youhuiquan {
background: #fff; border: red 1px solid;
width: 100%;
height: 100%;
font-size:20px;
text-align: center;
line-height: 60px;
color: #cc2924;
letter-spacing: 2px;
z-index: 1; }
.shou {
position: absolute;
bottom: -0.26667rem;
right: 10px;
width: 36px;
height: 55px;
background: url("../images/shou.png");
background-size: 100%;
z-index: 5; }

var Scratch = (function () {

    /**
     * Merge properties between two objects
     * @param obj1
     * @param obj2
     * @returns {{}}
     */
    function mergeOptions(obj1, obj2){
        var obj3 = {};
        for (var key in obj1) { obj3[key] = obj1[key]; }
        for (var key in obj2) { obj3[key] = obj2[key]; }
        return obj3;
    }

    /**
     * Generate a random number
     * @param min
     * @param max
     * @returns {Number}
     */
    function randomPoint(min, max) {
        var random = Math.abs(Math.random()*(max - min) + min);
        return random = parseInt(random.toFixed(0), 10);
    }

    /**
     * Scratch constructor
     * @param options
     * @constructor
     */
    var Scratch = function(options) {
        this.cursor = {
            png: '', // Modern browsers
            cur: '', // for IE
            x: 0,
            y: 0,
            default: 'auto'
        };
        this.pointSize = {
            x: 5,
            y: 5
        };
        this.defaults = {
            canvasId: '', // Canvas id
            imageBackground: '', // Path [src]
            pictureOver: '', // Path [src]
            cursor: this.cursor, // Custom pointer
            sceneWidth: 302, // Canvas width
            sceneHeight: 60, // Canvas height
            radius: 40, // Radius of scratch zone
            nPoints: 10, // n points for clear canvas
            pointSize: this.pointSize,
            percent: null,
            callback: null
        };

        this.options = mergeOptions(this.defaults, options);
        this.options.cursor = mergeOptions(this.cursor, options.cursor);
        this.options.pointSize = mergeOptions(this.pointSize, options.pointSize);

        // init Scratch
        this.init();
    };

    Scratch.prototype.init = function () {
        var _this = this; // Save the "this" :)

        this.canvas = document.getElementById(this.options.canvasId);
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = this.options.sceneWidth;
        this.canvas.height = this.options.sceneHeight;
        this.image = new Image();
        this.image.src = this.options.pictureOver;
        this.percent = 0;
        this.zone = null;
        this.pixelRatio = window.devicePixelRatio;

        // Set background after draw the canvas
        this.setBackground();
        this.setCursor();

        var scratchMove = function(e) {
            e.preventDefault();
            _this.scratch(e);
            var clear = _this.clear();
            if (clear) {
                _this.canvas.style.pointerEvents = 'none';
                _this.callback(_this.options.callback);
            }
        };

        window.addEventListener('resize', function() {
            _this.update();
            // Resize the canvas
            _this.redraw();
        });

        window.addEventListener('scroll', function() {
            _this.update();
        });

        // Mouse & Touch events
        this.canvas.addEventListener('mousedown', function(e) {
            _this.canvas.addEventListener('mousemove', scratchMove);

            document.body.addEventListener('mouseup', function _func() {
                _this.canvas.removeEventListener('mousemove', scratchMove);
                this.removeEventListener('mouseup', _func);
            });
        });

        this.canvas.addEventListener('touchstart', function(e) {
            _this.canvas.addEventListener('touchmove', scratchMove);

            document.body.addEventListener('touchend', function _func() {
                _this.canvas.removeEventListener('touchmove', scratchMove);
                this.removeEventListener('touchend', _func);
            });
        });

    };

    Scratch.prototype.setCursor = function() {
        var string = '';

        if (document.documentElement.classList.contains('is-ie') || navigator.userAgent.indexOf('Trident') != -1 || navigator.userAgent.indexOf('Edge') != -1) {
            string += 'url(' + this.options.cursor.cur + '), auto';
        } else {
            string += 'url(' + this.options.cursor.png + ') ' + this.options.cursor.x + ' ' + this.options.cursor.y + ', pointer';
        }

        this.canvas.setAttribute('style', 'cursor:' + string + ';');
    };

    // Update positions etc
    Scratch.prototype.update = function() {
        this.zone = this.canvas.getBoundingClientRect();
    };

    Scratch.prototype.redraw = function () {
        var oldWidth = this.options.sceneWidth;
        var newWidth = this.zone.width;
        if(newWidth < oldWidth) {
            this.ctx.clearRect(0, 0, this.zone.width, this.zone.height);
            this.canvas.width = this.zone.width;
            this.canvas.height = this.zone.height;
            this.ctx.drawImage(this.image, 0, 0, this.zone.width, this.zone.height);
        }
    };

    Scratch.prototype.setBackground = function() {
        var _this = this;
        this.image.onload = function() {
            _this.zone = _this.canvas.getBoundingClientRect();
            // Draw image
            _this.ctx.drawImage(this, 0, 0);
            // When the canvas have been drawn
            var IMG = document.createElement('img');
            IMG.classList.add('scratch_picture-under');
            IMG.src = _this.options.imageBackground;
            _this.canvas.parentElement.insertBefore(IMG, _this.canvas);
        };
    };

    Scratch.prototype.clearPoint = function (x1, y1) {
        var radius = this.options.radius;
        var x = Math.random() * 2 * radius - radius;
        var ylim = Math.sqrt(radius * radius - x * x);
        var y = Math.random() * 2 * ylim - ylim;
        x += radius;
        y += radius;

        x = parseInt(x, 10);
        y = parseInt(y, 10);

        return {
            x: x + x1,
            y: y + y1
        }

    };

    Scratch.prototype.getPosition = function(e) {
        var posX, posY;
        switch (e.type) {
            case 'touchmove':
                posX = e.touches[0].clientX - this.options.radius - window.pageXOffset;
                posY = e.touches[0].clientY - this.options.radius - window.pageYOffset;
                break;
            case 'mousemove':
                posX = e.clientX - this.options.radius - window.pageXOffset;
                posY = e.clientY - this.options.radius - window.pageYOffset;
                break;
        }

        return {
            x: posX,
            y: posY
        }
    };

    Scratch.prototype.scratch = function(e) {
        var position = this.getPosition(e);
        var x = position.x - this.zone.left;
        var y = position.y - this.zone.top + window.pageYOffset;
        var i = 0;
        var len = this.options.nPoints;

        for(i; i<len; i++) {
            var points = this.clearPoint(x, y);
            this.ctx.clearRect(points.x, points.y, this.options.pointSize.x, this.options.pointSize.y);
        }
        this.percent = this.getPercent();
    };

    Scratch.prototype.getPercent = function() {
        var percent;
        var counter = 0; // number of pixels clear
        var imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
        var imageDataLength = imageData.data.length;

        for(var i = 0; i < imageDataLength; i += 4) {
            if (imageData.data[i] === 0 && imageData.data[i+1] === 0 && imageData.data[i+2] === 0 && imageData.data[i+3] === 0) {
                counter++;
            }
        }

        if (counter >= 1) {
            percent = (counter / (this.canvas.width * this.canvas.height)) * 100;
        } else {
            percent = 0;
        }
        return percent;
    };

    Scratch.prototype.clear = function() {
        if (this.percent >= this.options.percent) {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            return true;
        }
    };

    Scratch.prototype.callback = function(callback) {
        if (callback != null && this.percent >= this.options.percent) {
            callback();
        }
    };

    return Scratch;
})();

文件地址：https://files.cnblogs.com/files/shimily/%E5%88%AE%E5%88%AE%E5%8D%A1-%E6%94%AF%E6%8C%81%E5%A4%9A%E4%B8%AA-wap%E7%AB%AF.zip

posted @ 2019-12-13 16:23 Shimily 阅读(200) 评论(0) 收藏举报

刷新页面返回顶部

Shimily

学而不思则罔，思而不学则殆

刮刮卡，支持多个刮刮卡，擦除效果，手机端 ， 2020草莓升磅

刮刮卡，支持多个刮刮卡，擦除效果，手机端， 2020草莓升磅