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();
        }
    }
  • 相关阅读:
    flush()方法
    多对一关联映射(manytoone)
    Hibernate配置数据库解决插入乱码问题
    lazy
    一对多关联映射(单向)
    属性类的映射
    多对多关联(双向)
    多对多关联映射(单向)
    多态查询
    Visual C# 2008+SQL Server 2005 数据库与网络开发11.2.2 LINQ的基本查询操作
  • 原文地址:https://www.cnblogs.com/tangbuluo/p/8425574.html
Copyright © 2011-2022 走看看