【回忆1314】抽奖之手机刮刮卡

直接看效果点这里(记得模拟手机噢)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title> 刮刮卡 </title>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
<script>
    var oCanvas = document.getElementById(‘canvas‘),
        aPrizeList = [‘http://ued.taobao.org/blog/wp-content/themes/taobaoued/images/logo.png‘, ‘http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png‘],
        prizeImg = aPrizeList[Math.floor(Math.random() * aPrizeList.length)];

    scratch(oCanvas, prizeImg, 0.8, function(){
        alert(‘end.‘);
    });

    /**
     * 刮刮卡
     * @param oCanvas   canvas绘图对象
     * @param prizeImg  中奖图片
     * @param scale     刮开区域占比
     * @param callback  刮开后执行的函数
     */
    function scratch(oCanvas, prizeImg, scale, callback){
        if(!oCanvas.getContext) return;
        var w = oCanvas.getAttribute(‘width‘),
            h = oCanvas.getAttribute(‘height‘),
            ctx = oCanvas.getContext(‘2d‘),
            fn = callback || function(){};

        // 设置奖品图片
        oCanvas.style.background = ‘url(‘+ prizeImg +‘) 0 0/cover no-repeat‘;

        // 绘制灰色刮奖区域
        ctx.fillStyle = "#999";
        ctx.fillRect(0,0, w, h);

        // 设置重叠显示方式
        ctx.globalCompositeOperation="destination-out";

        // 绑定事件
        oCanvas.addEventListener(‘touchstart‘, function(){

            // 按下并滑动
            oCanvas.addEventListener(‘touchmove‘, function(e){
                e.preventDefault();
                var x = e.targetTouches[0].clientX + document.body.scrollLeft - oCanvas .offsetLeft,
                    y = e.targetTouches[0].clientY + document.body.scrollTop - oCanvas.offsetTop;
                ctx.beginPath();
                ctx.arc(x, y, 15, 0, Math.PI*2);
                ctx.fill();
                ctx.closePath();
            });

            oCanvas.addEventListener(‘touchend‘, function(e){
                e.preventDefault();
                var count = 0,
                    datas = ctx.getImageData(0,0,w,h);
                for (var i = 0, len = datas.data.length; i < len; i++) {
                    if (datas.data[i] == 0) {
                        count++;
                    }
                }
                if (count >= datas.data.length * scale) {
                    fn();
                    ctx.fillRect(0,0,w,h);
                }

                oCanvas.removeEventListener(‘touchmove‘);
                oCanvas.removeEventListener(‘touchend‘);
            });
        });
    }

</script>
</body>
</html>
时间: 2024-11-08 06:34:55

【回忆1314】抽奖之手机刮刮卡的相关文章

中奖概率算法(php 可用于刮刮卡,大转盘等抽奖算法)

php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300,400), * 开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内, * 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间, * 在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的. * 这样 筛选到最终,总

php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法

php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 <!--?

paip.刮刮卡砸金蛋抽奖概率算法跟核心流程.

#---抽奖算法需要满足的需求如下: 1 #---抽奖核心流程 1 #---问题???更好的算法 2 #---实际使用的扩展抽奖算法(带奖品送完判断和每用户最大中奖判断) 2 #-------网上的抽奖算法Php 3 #----java版本的.. 4 参考 5 #---抽奖算法需要满足的需求如下: 1.可以控制中奖的概率 2.具有随机性 3.最好可以控制奖品的数量 4.根据用户ID或者ip.手机号.QQ号等条件限制抽奖次数 初期就这些需求,然后根据网上的资料,采用了一种阶段式抽取的方法,大家下面

js实现刮刮卡抽奖

刮刮卡抽奖是前端活动页常见的功能: 链接:图像擦除插件(下载及教程讲解)    推荐理由:无缝刮痕,兼容性好,上手简单   插件有些要修改的地方,打开图像擦除插件后可以看下方网友讨论,或者直接下载本博客文件中的jquery.eraser.js 使用方法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-

手机刮刮卡

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" /> <title> 刮

网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜欢这种方式. 你可能会很好奇, 它是如何实现的呢? 本文将阐述其原理, 并结合具体实例来演示如何借助H5的canvas来实现类刮刮卡的效果. 展示效果: 网页闯关游戏入口(请狠狠地点击我, ^_^) http://magic.mmxfgame.com. H5刮刮卡的实例源自第六关--拜访东方不败的故

用c#开发微信 (16) 微活动 2 刮刮卡

微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公众账号关注.对于企业来说,做微信推广重要的一个方面就是提高用户和公众账号之间的黏度,而微信刮刮卡就是其中最为常见的活动. 下面详细介绍: 一.使用 1. 新建一个刮刮卡的活动: 2. 奖项设置 3. 保存后,在微信里给公众号发一个“刮刮卡”的消息, 就会收到刮刮卡的内容,进入活动后,就可以刮奖了 二

Atitit .html5刮刮卡的gui实现总结

Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....postion:absoluti..高度宽度都是100% 1 #---2.初始化wScratchPad 1 #-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask.. 2 #-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/no

Html5实现移动端、PC端 刮刮卡效果

刮刮卡需求: 每一位用户有三次刮刮卡的机会 本次刮刮卡的结果会覆盖上次的结果 刮刮卡的中奖几率呈现为递增的曲线(保证三次中必须有一次中奖) 刮出的结果包含按钮既(领取奖品 or 再来一次 ) 分享活动奖品升级(这里主要是微信分享的回调了) 我们自己的需求,今天就说怎么制作刮刮卡,有这样需求的可以找我要源码 第一.body创建Canvas <div class="info" id="prize"> <span id="prompt"