<!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. Linux 多网卡的7种bond模式原理

    Linux 多网卡绑定 网卡绑定mode共有七种(0~6) bond0.bond1.bond2.bond3.bond4.bond5.bond6 常用的有三种 mode=0:平衡负载模式,有自动备援,但 ...

  2. MediaPlayer+SurfaceView 视频播放 示例

    SurfaceView的原理         SurfaceView在视频播放中起到显示画面的作用,而视频的播放主要通过MediaPlayer来控制.         SurfaceView 允许我们 ...

  3. Wijmo 日历插件

    说明: 因为项目(OA)的需要,我负责开发日程的模块,相信大家用过谷歌的日历了吧,是不是觉得挺好用,但又苦于无法实现? 这里告诉你一个很好的插件,Wijmo,而里面有一个类似谷歌的日历事件插件,真的很 ...

  4. ZOJ3161

    朴素动态规划 ZOJ3161 题意:(严重标题党)老板不想让客人走,客人不想留,客人按顺序排好,老板抽8g(书上翻译成八卦,神翻译),抽到的 如果相邻,其中一个人由客人决定离开,求最后黑心的老板最多能 ...

  5. POJ3750

    #include <iostream> #include <stdio.h> #include <cstring> using namespace std; int ...

  6. Asp服务器控件(HyperLink、Button) 绑定后台参数 DataBinder.Eval

    HyperLink动态绑定参数 <asp:HyperLink id="MbCenterHLnk" runat="server" Text='会员中心' T ...

  7. mysql 写数据操作几次硬盘?

    mysql 写数据步骤: 1:写入操作事物日志,持久化操作日志到磁盘,并且只是写在磁盘上一小块区域内的顺序io,不需要像随机io一样 在磁盘多个地方移动磁头 2:内存中事物日志持久化以后  ,写入的数 ...

  8. C#中从元数据

    元数据相对我们来说通俗点 就是你引用里面引用的那些dll比如 对Thread 按F12  不就是提示从元数据,..

  9. 武汉科技大学ACM ：1003: 零起点学算法78——牛牛

    Problem Description 牛牛是一种纸牌游戏,总共5张牌,规则如下: 如果找不到3张牌的点数之和是10的倍数,则为没牛: 如果其中3张牌的点数之和是10的倍数,则为有牛,剩下两张牌的点数 ...

  10. Java中实现线程的方法

    Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用? 第一种:继承Thread类 new Thread(){}.start();这表示调 ...