<!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. UVA 12378 Ball Blasting Game 【Manacher回文串】

    Ball Blasting Game Morteza is playing a ball blasting game. In this game there is a chain of differe ...

  2. 软键盘 输入法管理器 InputMethodManager

     基本介绍 软键盘的显示原理 软键盘其实是一个Dialog.InputMethodService为我们的输入法创建了一个Dialog,并且对某些参数进行了设置,使之能够在底部或者全屏显示.当我们点击输 ...

  3. Struts2 处理表单重复提交

    * 在表单页面中增加一个隐藏域:<s:token></s:token>(需要在表单内)        * 创建一个struts.xml的配置文件,具体配置如下:         ...

  4. swing菜单，常用组件，常用容器

    1菜单 import javax.swing.*; import java.awt.*; import java.awt.event.InputEvent; import java.awt.event ...

  5. 高放的c++学习笔记之函数基础

    局部变量 函数里面的局部变量有普通的局部变量和局部静态变量两种. 普通局部变量变量就是正常定义在函数体内部的变量,如果返回局部变量的地址,以便于函数调用结束后还继续访问此变量的话,编译器会报warni ...

  6. 快速幂：quickpow

    众所周知,快速幂是优化对数的次方运算的最普遍手段.在学习快速幂的思想时,其分治思想容易让大家用简单的递归实现. 但其实,除了递归之外,更好的方法会是简单的 WHILE循环.下面贴代码: #includ ...

  7. [转]C++ list 类学习笔记

    双向循环链表list list是双向循环链表,,每一个元素都知道前面一个元素和后面一个元素.在STL中,list和vector一样,是两个常被使用的容器.和vector不一样的是,list不支持对元素 ...

  8. QT学习：入门篇（三）

    头文件: #ifndef CChatDisplaySet_h #define CChatDisplaySet_h #include "QtGui/QDialog" #include ...

  9. 使用SOCKET TCP

    刚刚接触SOCKET编程,网上看了一些资料,发现做些简单的应用还是不难.但是要深入了解SOCKET编程还需要系统的看一些书.一般在进程间通信TCP是一种不错的方式. ---XXX TCP链接是面向流的 ...

  10. ajax提交表单序列化（serialize()）数据

    知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...