class Scratch{constructor(options){this.obj = document.querySelector(options.obj);    //div容器this.bgPic = options.bgPic;    //刮刮卡前景图this.radius = options.radius;    //圆半径this.area = options.area || 50;    //擦拭部分面积 超过部分隐藏或者清除画布（当前清除画布）this.succuss = options.succuss;    //擦拭成功后执行方法this.startfn = options.startfn; //开始擦拭时调用刮刮乐结果（可以给div换图或者换样式）this.isPrize = false;    //是否擦拭完毕
    }//初始化
    init(){this.getSize();this.createCanvas();this.drawBg();this.event();}//获得容器的宽高（用于设置canvas宽高）
    getSize(){this.width = this.obj.offsetWidth;this.height = this.obj.offsetHeight;this.left = this.obj.offsetLeft;this.top = this.obj.offsetTop;}//创建canvas并设置宽高插入容器中
    createCanvas(){let canvas = document.createElement("canvas");canvas.width = this.width;canvas.height = this.height;this.ctx = canvas.getContext("2d");this.obj.append(canvas)}//绘制前景图 图片必须预加载
    drawBg(){let oImg = new Image(),that = this;oImg.src = that.bgPic;oImg.onload=()=>{this.touch = true;this.ctx.drawImage(oImg,0,0,oImg.width,oImg.height,0,0,this.width,this.height);this.ctx.globalCompositeOperation = 'destination-out';    //设置原有内容中与新图形不重叠的部分会被保留
        }}//添加touch事件
    event(){let obj = this.obj,that = this;obj.addEventListener("touchstart",event=>{that.touchCanvas(event).bind(this)})obj.addEventListener("touchmove",event=>{that.touchCanvas(event).bind(this)})obj.addEventListener("touchend",event=>{})}//擦拭canvas
    touchCanvas(event){if(!this.touch){return false;}if(!this.isPrize){this.isPrize = true;this.startfn();}var e=window.event||event;e.preventDefault();    //禁止ios和安卓默认事件页面下拉动this.clearCanvas(e.targetTouches[0].pageX-this.left,e.targetTouches[0].pageY-this.top);}//绘制圆形 橡皮擦
    clearCanvas(x,y){this.ctx.save();this.ctx.beginPath();this.ctx.arc(x,y,this.radius,0,2*Math.PI);this.ctx.fill();this.ctx.closePath();this.ctx.stroke();this.ctx.restore();this.compute();}//计算透明区域
    compute(){var pixels = this.ctx.getImageData(0,0,this.width,this.height).data;let transPixels = [];for(let i = 0; i < pixels.length; i += 4){// 严格上来说，判断像素点是否透明需要判断该像素点的a值是否等于0，// 为了提高计算效率，这儿设置当a值小于128，也就是半透明状态时就可以了if(pixels[i+3] < 128){transPixels.push(pixels[i+3]);}}let area= (transPixels.length / (pixels.length / 4) * 100).toFixed(2);if(area>this.area){this.touch = false;this.ctx.clearRect(0,0,this.width,this.height);this.ctx.globalCompositeOperation = 'source-over';this.succuss();}}//再来一次（重置）
    reset(){this.isPrize = false;this.drawBg();}
}