<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<meta name="screen-orientation" content="portrait">

<script src="js/jquery-1.7.2.min.js"></script>

<title>JS刮刮乐</title>

<style>

    .box {

        position: relative;

        width: 200px;

        height: 200px;

        background:url("img/gao1.jpg") no-repeat;

        background-size: 100% 100%;

        text-align: center;

        line-height: 200px;

    }

    #myCanvas{

        position: absolute;

        left:0;

        top:0;

    }

</style>

</head>

<body>

    <div id="box" class="box">

        <canvas id="myCanvas" width="200" height="200"></canvas>

    </div>

<input type="submit" value="再来一次"  onclick="location.reload()"/>

<script type="text/javascript">

 var arr = ["img/aa.png","img/bb.png","img/cc.png","img/dd.png"];

window.onload = function(){

  console.log((Math.random()*3).toFixed(0)+"+"+arr[(Math.random()*3).toFixed(0)]);

  var myCanvas = document.getElementById("myCanvas");

  var can = myCanvas.getContext("2d");

  var X = myCanvas.width;

  var Y = myCanvas.height;

  var oImg = new Image();

  oImg.src = "img/gao4.jpeg";

  var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());

  oImg.onload = function(){

    can.beginPath();

    can.drawImage(oImg,0,0,X,Y);

    can.closePath();

  } 

  var tochstrat = device?"touchstart":"mousedown";

  var tochmove = device?"touchmove":"mousemove";

  var tochend = device?"touchend":"mouseup";

  function draw(event){

      var x = device?event.touches[0].clientX:event.clientX;

      var y = device?event.touches[0].clientY:event.clientY;

      console.log("X:"+x+"Y:"+y);

    can.beginPath();

    //

    can.globalCompositeOperation = "destination-out";

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

    can.fill();

    can.closePath();

  }

  myCanvas.addEventListener(tochstrat,function(){

      myCanvas.addEventListener(tochmove,draw,false);

  },false);

  myCanvas.addEventListener(tochend,function(){

      myCanvas.addEventListener(tochmove,draw,false);

  },false);

  $("#box").css("background-image","url("+arr[(Math.random()*3).toFixed(0)]+")");

}

</script>

</body>

</html>

使用HTML5 globalCompositeOperation = "destination-out"; 方法实现的刮刮乐效果

HTML5 简单实现刮刮乐效果的更多相关文章

  1. 移动端利用canvas画布简单实现刮刮乐效果

    为了研究canvas一些属性简单实现的一个小效果  代码样式不太规范 随手写的 请问喷 初学者可以看下 css代码 <style> * { margin: 0; padding: 0; } ...

  2. HTML5 Canvas实战之刮奖效果

    近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...

  3. 【Android界面实现】使用Canvas对象实现“刮刮乐”效果

    在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...

  4. HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  5. iOS-仿支付宝刮刮乐效果

    概述 仿支付宝刮刮乐效果, 可以按照自己需求更改展示刮出来的效果的view(即刮开后刮刮乐效果展示) 详细 代码下载:http://www.demodashi.com/demo/10673.html ...

  6. [cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)

    [转]http://blog.csdn.net/realcrazysun1/article/details/42393629 本文基于cocos2d-js 3.0版本引擎开发 RenderTextur ...

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

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

  8. 菜鸟做HTML5小游戏 - 刮刮乐

    继上篇翻翻乐之后,又来刮刮乐.还是先上效果图: 开始demo的世界: 1.css去绘制界面效果.(源码提供) 2.原理:要实现刮刮卡内容的出现,我用div做了背景层去显示刮出的内容结果[重点].中间C ...

  9. Android打造完美的刮刮乐效果控件

    技术:Android+Java   概述 趁着元旦假期之际,首先在这里,我祝福大家在新的2019年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆 ...

随机推荐

  1. Android android-common 常用功能和工具集合

    本文内容 环境 android-common 项目结构 演示 android-common 参考资料 android-common 主要包括如下内容: 缓存,包括图片缓存.预取缓存.网络缓存. 公共 ...

  2. canvas toDataUrl 跨域问题

    使用canvas 的 toDataUrl方法会遇到跨域问题 chrome 会报下面的错误: Uncaught SecurityError: Failed to execute 'toDataURL' ...

  3. tomcat加载不了spring-webjar终极解决办法

    Problems: I included: all Spring libs, Apache Tomcat 7.0 library in Build Path but it still gives er ...

  4. 12 个 CSS 高级技巧汇总

    下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...

  5. 把数据库中的null作为条件查询应该用is

    如select * from mbXX where tuijian is null 而不是select * from mbXX where tuijian=null

  6. （转）select 1 from ... sql语句中的1代表什么意思？ .

    select  1 from ..., sql语句中的1代表什么意思?查出来是个什么结果?         select 1 from table;与select anycol(目的表集合中的任意一行 ...

  7. Nagios监控memcached

    下载地址: http://search.cpan.org/CPAN/authors/id/Z/ZI/ZIGOROU/Nagios-Plugins-Memcached-0.02.tar.gz http: ...

  8. 复制、移动和删除：cp, rm, mv

    要复制文件,请使用cp(copy)命令.不过,cp命令的用途很多.除了单纯的复制之外,还可以建立连接文件(就是快捷方式),比较两个文件的新旧而予以更新,以及复制整个目录等等.至于移动目录与文件,则使用 ...

  9. Laravel5中集成Jasig cas统一认证系统

    CAS : CAS(Central Authentication Service)是一款不错的针对 Web 应用的单点登录框架,这里介绍下我刚在laravel5上搭建成功的cas.提前准备工作:可运行 ...

  10. 在线支付接口之PHP支付宝接口开发

    支付接口一般是第三方提供的代收款.付款的平台,可以通过支付接口帮助企业或个人利用一切可以使用的支付方式.常见支付平台:支付宝.快钱.云网支付.财付通. 支付宝页面:订单页面.状态页面.返回页面.--- ...