lom599乐百家官网急求关于canvas题目

今天做一个刮奖的项目,要用到canvas,在用户中断刮奖时,从背景央求数据并且用canvas将奖品名字画在画布上,但是题目来了,用户在中断刮奖操纵时,从背景央求的数据要画在画布上,仿佛是需求重新绘制图形,但是那样用户第一步刮奖的操纵就有效了,讨教能否可以只更新奖品名字那一部分?或许有其他更好的办法?
附代码:

$function {
//定义Lottery类
    function Lotteryid, cover, coverType, width, height, drawPercentCallback {
        this.conId = id;
        this.conNode = document.getElementByIdthis.conId;
        this.cover = cover;
        this.coverType = coverType;
        this.background = null;
        this.backCtx = null;
        this.mask = null;
        this.maskCtx = null;
        this.lottery = null;
        this.lotteryType = image;
        this.width = width || 800;
        this.height = height || 100;
        this.clientRect = null;
        this.drawPercentCallback = drawPercentCallback;
    }

    Lottery.prototype = {
        createElement: function tagName, attributes {
            var ele = document.createElementtagName;
            for var key in attributes {
                ele.setAttributekey, attributes[key];
            }
            return ele;
        },
        //涂抹地区百分比
        getTransparentPercent: function ctx, width, height {
            var imgData = ctx.getImageData0, 0, width, height,
                pixles = imgData.data,
                transPixs = [];
            for var i = 0, j = pixles.length; i < j; i += 4 {
                var a = pixles[i + 3];
                if a < 128 {
                    transPixs.pushi;
                }
            }
            return transPixs.length / pixles.length / 4 * 100.toFixed2;
        },
        //改动canvas大小的东西办法。
        resizeCanvas: function canvas, width, height {
            canvas.width = width;
            canvas.height = height;
            canvas.getContext2d.clearRect0, 0, width, height;
        },
        //绘制点击和涂抹地区
        drawPoint: function x, y {
            this.maskCtx.beginPath;
            var radgrad = this.maskCtx.createRadialGradientx, y, 0, x, y, 30;
            radgrad.addColorStop0, rgba0,0,0,0.6;
            radgrad.addColorStop1, rgba255, 255, 255, 0;
            this.maskCtx.fillStyle = radgrad;
            this.maskCtx.arcx, y, 15, 0, Math.PI * 2, true;
            this.maskCtx.fill;
            if this.drawPercentCallback {
                this.drawPercentCallback.callnull, this.getTransparentPercentthis.maskCtx, this.width, this.height;
            }
        },
        //绑定事变
        bindEvent: function  {
            var _this = this;
            var device = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.testnavigator.userAgent.toLowerCase;
            var clickEvtName = device ? touchstart : mousedown;
            var moveEvtName = device ? touchmove : mousemove;
            if !device {
                var isMouseDown = false;
                document.addEventListenermouseup, function e {
                    isMouseDown = false;
                }, false;
            } else {
                document.addEventListener"touchmove", function e {
                    if isMouseDown {
                        e.preventDefault;
                    }
                }, false;
                document.addEventListenertouchend, function e {
                    isMouseDown = false;
                }, false;
            }
            this.mask.addEventListenerclickEvtName, function e {
                isMouseDown = true;
                var docEle = document.documentElement;
                if !_this.clientRect {
                    _this.clientRect = {
                        left: 0,
                        top: 0
                    };
                }
                var x = device ? e.touches[0].clientX : e.clientX - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;
                var y = device ? e.touches[0].clientY : e.clientY - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;
                _this.drawPointx, y;
            }, false;

            this.mask.addEventListenermoveEvtName, function e {
                if !device && !isMouseDown {
                    return false;
                }
                var docEle = document.documentElement;
                if !_this.clientRect {
                    _this.clientRect = {
                        left: 0,
                        top: 0
                    };
                }
                var x = device ? e.touches[0].clientX : e.clientX - _this.clientRect.left + docEle.scrollLeft - docEle.clientLeft;
                var y = device ? e.touches[0].clientY : e.clientY - _this.clientRect.top + docEle.scrollTop - docEle.clientTop;
                _this.drawPointx, y;
            }, false;
        },
        //添加两个canvas到刮奖容器,并获取2d上下文
        drawLottery: function  {
            this.background = this.background || this.createElementcanvas, {
                    style: position:absolute;left:0;top:0;
                };
            this.mask = this.mask || this.createElementcanvas, {
                    style: position:absolute;left:0;top:0;
                };

            if !this.conNode.innerHTML.replace/[\w\W]| /g,  {
                this.conNode.appendChildthis.background;
                this.conNode.appendChildthis.mask;
                this.clientRect = this.conNode ? this.conNode.getBoundingClientRect : null;
                this.bindEvent;
            }

            this.backCtx = this.backCtx || this.background.getContext2d;
            this.maskCtx = this.maskCtx || this.mask.getContext2d;
            //绘制第一个canvas
            if this.lotteryType == image {
                var image = new Image,
                    _this = this;
                image.onload = function  {
                    _this.width = this.width;
                    _this.height = this.height;
                    _this.resizeCanvas_this.background, this.width, this.height;
                    _this.backCtx.drawImagethis, 0, 0;
                    _this.drawMask;
                }
                image.src = this.lottery;
            } else if this.lotteryType == text {
                this.width = this.width;
                this.height = this.height;
                this.resizeCanvasthis.background, this.width, this.height;
                this.backCtx.save;
                this.backCtx.fillStyle = #FFF;
                this.backCtx.fillRect0, 0, this.width, this.height;
                this.backCtx.restore;
                this.backCtx.save;
                var fontSize = 20;
                this.backCtx.font = Bold  + fontSize + px Arial;
                this.backCtx.textAlign = center;
                this.backCtx.fillStyle = #da345f;
                this.backCtx.fillTextthis.lottery, this.width / 2, this.height / 2 + fontSize / 2;
                this.backCtx.restore;
                this.drawMask;
            }
        },
        //绘制第二个canvas
        drawMask: function  {
            this.resizeCanvasthis.mask, this.width, this.height;
            if this.coverType == color {
                this.maskCtx.fillStyle = this.cover;
                this.maskCtx.fillRect0, 0, this.width, this.height;
                this.maskCtx.globalCompositeOperation = destination-out;
            } else if this.coverType == image {
                var image = new Image,
                    _this = this;
                image.onload = function  {
                    _this.maskCtx.drawImagethis, 0, 0;
                    _this.maskCtx.globalCompositeOperation = destination-out;
                }
                image.src = this.cover;
            }
        },
        //调用入口init
        init: function lottery, lotteryType {
            this.lottery = lottery;
            this.lotteryType = lotteryType || image;
            this.drawLottery;
        }
    };
    //加载页面绘制空缺数据
    window.onload = function  {
        var lottery = new Lotteryscratch-area, #092f57, color, 300, 102,drawPercent;
        lottery.init"",text;
        //判别刮开的地区
        function drawPercentpercent {
            $"#drawPercent".htmlpercent;
            var area = $"#drawPercent".html;
            //console.logarea;
        }
        //末尾刮奖央求数据,偏重新绘制canvas
        $"#scratch-area".data"flag", true.on"touchstart", function e {
            e.preventDefault;
            if $this.data"flag" {
                $.ajax{
                    url: /scratchcard/lottery?eventId= + eventId + &mappId= + appId,
                    dataType: json,
                    success: function data {
                        console.logdata;
                        $".frequency-total".textdata.prizeChance;
                        var prize = data.prizeName;
                        //抽奖次数
                        var prizeChance = data.prizeChance;
                        //能否抽中奖品
                        var prizeType = parseIntdata.prizeType;
                        //判别抽奖机遇
                        if prizeChance > 0 {
                            var lottery = new Lotteryscratch-area, #092f57, color, 300, 102, drawPercent;
                            lottery.initprize, text;
                            if prizeType == 0 {
                                $".look-prize".css"visibility","visible".on"click",function{
                                    window.location.href="/center/coupon?mappId="+mappId;
                                };
                            }
                            function drawPercentpercent {
                                $"#drawPercent".htmlpercent;
                                var area = $"#drawPercent".html;
                                if area > 9.5 && prizeType == 2 {
                                    //app.alert祝贺您获得 + " + prize + "!, 刮刮乐, function  {
                                    //    //location.reload;
                                    //    console.log"in"
                                    //};
                                    $".look-prize".css"visibility","visible".html"点我革新".on"click",function{
                                       location.reload;
                                    };
                                }
                            }

                        } else {
                            app.alert您的剩余刮奖次数缺乏!, 刮刮乐,function{
                                location.reload;
                            };
                        }

                    },
                    error: function error {
                        app.alerterror.responseText, 刮刮乐;
                    }
                };
                $this.data"flag", false;
                console.log"in"
            }

        };
    };
    

};

讲下大致的思路,此中dom构造这么放

<section>
    <img src=x />
    <canvas></canvas>
</section>

然后position构造放canvas粉饰笼罩在img下面,然后canvas监听touch和mouseMove事变,根据event的layerX/layerY或许offsetX/offsetY得出以后活动的坐标点,然后整理失canvas下面的图案,整理办法在下面。
可以做个回失的监测,当整理的面积(根据半径和移动的xy坐标可算)大于整个canvas面积的70%(随意举例)就算刮奖完成。
别看讲的这么复杂,写完这部分代码,加上种种界线反省等容错得弄几个小时吧。


以下是原答案:
发起做两层,然后堆叠,canvas默许是png范例有透明通道的,直接刮开canvas下面就看到了奖品的那个图片。
canvas里面有cleanRect的办法,整理失矩形地区很好用,但是圆形地区没有直接的接口,但是使用globalCompositeOperation可以hack一个整理圆形地区的办法出来。
补充一下关于clean arc 方面的一点东西:
http://stackoverflow.com/ques…

function cleanArccontext, x, y, radius{
    context.globalCompositeOperation = destination-out
    context.arcx, y, radius, 0, Math.PI*2, true;
    context.fill;
}

很多多少代码,猛烈了我的哥

(看完/读完)这篇文章有何感想! lom599乐百家官网的分享…

发表评论

姓名 *
电子邮件 *
站点