zoukankan      html  css  js  c++  java
  • 刮刮乐

    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();
        }
    }
  • 相关阅读:
    怎样解决:未找到路径“……”的控制器或该控制器未实现 IController?
    错误:org.springframework.jdbc.support.SQLErrorCodesFactory
    springbean的生命周期
    注解到处excel
    nio读取文件,输出文件
    AtomicReference
    唯一id
    hashmap1.7的死锁模拟
    数组模拟stack
    环形队列
  • 原文地址:https://www.cnblogs.com/tangbuluo/p/8425574.html
Copyright © 2011-2022 走看看