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();
        }
    }
  • 相关阅读:
    JQuery Ajax调用asp.net后台方法
    Android版本检测\自动更新
    android Manifest.xml选项
    Android: 自定义Tab样式
    Android TextView(EditView)文字底部或者中间 加横线
    activity横竖屏翻转不重载
    一句代码过滤字符串中所有tag标签
    去除掉TabHost下面那个边线的小技巧
    软键盘挡住控件的问题
    自定义 textview上LINK的点击事件
  • 原文地址:https://www.cnblogs.com/tangbuluo/p/8425574.html
Copyright © 2011-2022 走看看