<!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. Linux Oracle服务启动&停止脚本与开机自启动

    在CentOS 6.3下安装完Oracle 10g R2,重开机之后,你会发现Oracle没有自行启动,这是正常的,因为在Linux下安装Oracle的确不会自行启动,必须要自行设定相关参数,首先先介 ...

  2. Java常用命令行工具

    命令基于Sun JDK,用于监控和诊断HotSpot的java 虚拟机. 对应的可执行文件位于$JAVA_HOME/bin/下 jps-虚拟机进程状况工具 选项 作用 -q 只输出LVMID,同进程p ...

  3. HDU 3072 Intelligence System （强连通分量）

    Intelligence System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  4. c# socket编程简单例子

    服务器端代码 using System; using System.Net; using System.Net.Sockets; using System.Text; using System.Thr ...

  5. BestCoder Round #68 (div.2) tree（hdu 5606）

    tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...

  6. POJ 3041 Asteroids (二分图最小点覆盖)

    题目链接:http://poj.org/problem?id=3041 在一个n*n的地图中,有m和障碍物,你每一次可以消除一行或者一列的障碍物,问你最少消除几次可以将障碍物全部清除. 用二分图将行( ...

  7. 关于java的continue、break关键字用法

    一 明确两个概念 循环:是指按照规定次数重复执行某一操作的全过程:其关键语句有for. foreach.while.do while 迭代:是指循环过程中单次操作,1次循环由n次迭代构成 二 用法归纳 ...

  8. Unity3D之移植学习笔记：移植到Android平台更好的方法

    接上文,之前我们采用了直接将Unity项目导出为Eclipse项目来修改的方式,这种做法存在的一个最大的问题就是:每当Unity被修改之后,都需要重新导出,而每次导出的项目在Android平台方面的J ...

  9. [转]javascript对联广告、漂浮广告封装类，多浏览器兼容

    封装的JS方法: function $$(element){ if(arguments.length>1){ for(var i=0,elements=[],length=arguments.l ...

  10. MVC神韵---你想在哪解脱！（十七）

    实现针对数据的CRUD操作 首先,让我们来看一下如何实现一条数据的明细信息视图.为了更好地体会这一功能,首先我们在前文所述的电影清单视图(Views文件夹下面的Movies文件夹下面的Index.cs ...