<!DOCTYPE html>

<html>

<body>

<canvas/>

<script>

    (function(bodyStyle) {

        bodyStyle.mozUserSelect = 'none';

        bodyStyle.webkitUserSelect = 'none';

        var img = new Image();

        var canvas = document.querySelector('canvas');

        canvas.style.backgroundColor='transparent';

        canvas.style.position = 'absolute';

        img.addEventListener('load', function(e) {

            var ctx;

            var w = img.width,

                h = img.height;

            var offsetX = canvas.offsetLeft,

                offsetY = canvas.offsetTop;

            var mousedown = false;

            function layer(ctx) {

                ctx.fillStyle = 'gray';

                ctx.fillRect(0, 0, w, h);

            }

            function eventDown(e){

                e.preventDefault();

                mousedown=true;

            }

            function eventUp(e){

                e.preventDefault();

                mousedown=false;

            }

            function eventMove(e){

                e.preventDefault();

                if(mousedown) {

                    if(e.changedTouches){

                        e=e.changedTouches[e.changedTouches.length-1];

                    }

                    var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,

                        y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;

                    with(ctx) {

                        beginPath()

                        arc(x, y, 20, 0, Math.PI * 2);

                        fill();

                    }

                }

            }

            canvas.width=w;

            canvas.height=h;

            canvas.style.backgroundImage='url('+img.src+')';

            ctx=canvas.getContext('2d');

            ctx.fillStyle='transparent';

            ctx.fillRect(0, 0, w, h);

            layer(ctx);

            ctx.globalCompositeOperation = 'destination-out';

            canvas.addEventListener('touchstart', eventDown);

            canvas.addEventListener('touchend', eventUp);

            canvas.addEventListener('touchmove', eventMove);

            canvas.addEventListener('mousedown', eventDown);

            canvas.addEventListener('mouseup', eventUp);

            canvas.addEventListener('mousemove', eventMove);

        });

        img.src = 'prize.jpg';

    })(document.body.style);

</script>

</body>

</html>

        <style>body{

    margin:50px;

  background-color:#2C3437;

}

.content{

  display:inline-block;

  width:350px;

  height:239px;

  margin-right:-4px;

}

.play{

    cursor:pointer;

    background-color:#060;

}

div>div{

  display:block;

  height:20px;

}

div>div>div{

  width:16px;

  height:16px;

  background-color:#FFF;

  display:inline-block;

  float:right;

  margin:2px;

}

</style>

                <script>$(document).ready(function(){

    animate();

  $(".play").click(animate).mouseover(function(){

      $(".play").css({"background-color":"#A55"});

  }).mouseout(function(){

      $(".play").css({"background-color":"#060"});

  });

});

function animate(){

      $('div>div>div').each(function(id){

    $(this).css({

      position: 'relative',

      top: '-200px',

      opacity: 0

    });

    var wait = Math.floor((Math.random()*3000)+1);

    $(this).delay(wait).animate({

      top: '0px',

      opacity: 1

    },1000);

  });

}

</script>

<!-- Generated by RunJS (Mon Mar 24 17:39:15 CST 2014) 1ms -->

这张图片是prize.jpg

js实现刮刮卡效果的更多相关文章

  1. js实现刮刮卡抽奖

    刮刮卡抽奖是前端活动页常见的功能: 链接:图像擦除插件(下载及教程讲解)    推荐理由:无缝刮痕,兼容性好,上手简单   插件有些要修改的地方,打开图像擦除插件后可以看下方网友讨论,或者直接下载本博 ...

  2. qt qml 刮刮卡效果

    用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...

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

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  4. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  5. 使用HTML5实现刮刮卡效果

    你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...

  6. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  7. Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

  8. js-刮刮卡效果，由jquery-eraser源码改的vue组件

    vue-eraser 一款用于vue刮刮卡的组件 github地址: vue-eraser npm地址: vue-eraser 在网上有看到过几个版本的组件,都有点问题 1.拉快了,就会断,连不起来( ...

  9. Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...

  10. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

随机推荐

  1. 第二百八十八天 how can I坚持

    明天,就要回济南了.早上八点的票,去火车站还得一个半小时,六点就得起床啊,好早,忍了. 这两天又没法更新日志了.周一才能回来. 今天好忙,事情好杂. 其实不想请假. 算了,睡觉了,没什么可写的了.是没 ...

  2. HDU 4791 Alice's Print Service (2013长沙现场赛，二分)

    Alice's Print Service Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  3. SPOJ 375 (树链剖分 - 边权剖分 - 修改单边权)

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28982#problem/I 给你一棵有边权的树,有两个操作:一个操作是输出l到 ...

  4. Dynamically loading an external JavaScript or CSS file

    原文:   Dynamically loading an external JavaScript or CSS file 通过javascript动态加载css文件和javascript文件,主要是通 ...

  5. 《解剖PetShop》系列转载

      1 <解剖PetShop>系列之六 PetShop之表示层设计    http://ityup.com/showtopic-8.html 2 <解剖PetShop>系列之五 ...

  6. Angularjs 初始化框架

    bindJQuery(); publishExternalAPI(angular); jqLite(document).ready(function() { angularInit(document, ...

  7. Understanding CloudStack’s Physical Networking Architecture

    Understanding and configuring the physical connections of a host in a CloudStack deployment can at f ...

  8. 使用Unity制作游戏关卡的教程（二）

    转自:http://gamerboom.com/archives/75554 作者:by Matthias Zarzecki 本文是“使用Unity制作<The Fork Of Truth> ...

  9. UVa 112 Tree Summing

    题意: 计算从根到叶节点的累加值,看看是否等于指定值.是输出yes,否则no.注意叶节点判断条件是没有左右子节点. 思路: 建树过程中计算根到叶节点的sum. 注意: cin读取失败后要调用clear ...

  10. PostgreSQL中，database,schema,table之间关系

    从逻辑上看,schema,table,都是位于database之下. 首先,在postgres数据库下建立表(相当于建立在public schema下): [pgsql@localhost bin]$ ...