刮刮乐

Posted 2020-10-23 糖糖部落

var ggl = {
    init:function(){
        this.drawRect();
    },
    fBindGGLCanvas:function(){
        var self = this;
        self.drawRect();
        var startFunc = function(e){
            var loc = self.windowToCanvas(e);
            dragging = true;
            self.drawEraser(loc);
        }
        var moveFunc = function(e){
            e.preventDefault();
            var loc;
            if (dragging) {
                loc = self.windowToCanvas(e);
                self.drawEraser(loc);
            }
        }
        var endFunc = function(e){
            dragging = false;
            var data = context.getImageData(0, 0, w, h).data,
                scrapeNum = 0;
            for(var i = 3, len = data.length; i < len; i += 4){
                if(data[i] === 0){
                    scrapeNum++;
                }
            }
            if(scrapeNum > area * 0.1){
                canvas.style.display = ‘none‘;
            }
        }
        canvas.addEventListener(‘touchstart‘, startFunc);
        canvas.addEventListener(‘touchmove‘, moveFunc);
        canvas.addEventListener(‘touchend‘, endFunc);
        canvas.addEventListener(‘mousedown‘, startFunc);
        canvas.addEventListener(‘mousemove‘, moveFunc);
        canvas.addEventListener(‘mouseup‘, endFunc);
    },
    drawRect:function(){
        context.save();
        var image = new Image();
        image.src = document.getElementById("qb").src;
        image.onload = function () {
            context.drawImage(image, 0, 0, w, h);
        }
        context.restore();
    },
    windowToCanvas: function(e) {
        if(!e.targetTouches || !e.targetTouches.length){
            return {x:0,y:0}
        }
        var x = e.targetTouches[0].clientX,
            y = e.targetTouches[0].clientY,
            bbox = canvas.getBoundingClientRect();
        return {
            x: x - bbox.left,
            y: y - bbox.top
        }
    },
    drawEraser: function(loc) {
        context.save();
        context.beginPath();
        context.arc(loc.x, loc.y, ERASER_SIZE, 0, Math.PI * 2, false);
        context.clip();
        context.clearRect(0, 0, w, h);
        context.restore();
    }
}