<!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. css实现鼠标移上去变大，旋转，转别人的额

    <!doctype html><html><head> <meta charset="utf-8"> <title>CS ...

  2. mui实现退出当前应用

    var first = null; var showMenu = false; mui.back = function() { if(showMenu) { closeMenu();} else { ...

  3. hdu 1880 字符串hash

    /*普通的hsah 由于元素太多 空间很小..hash碰撞很厉害.30分*/ #include<iostream> #include<cstdio> #include<c ...

  4. if..endif 语法

    使用 if(); elseif(); else; endif; 这一系列复杂的语句无助于 PHP 3.0 解析器的效率.因此,语法改变为: Example#1 移植:旧有 if..endif 语法 i ...

  5. Android开发手记(8) ProgressDialog的使用

    ProgressDialog,进度对话框.一般有两种,一种是圆形的进度条(ProgressDialog.STYLE_SPINNER),另一种是长条形的进度条(ProgressDialog.STYLE_ ...

  6. MySQL教程:数据库具体操作

    1. 连接数据库服务器 $ ./mysql -h host_name -u user_name -p -h host_name(--host=host_name),连接的数据库主机名,如果在本地主机上 ...

  7. php插入转义与查找转义

    //转义用于查找 function deepslashes($data) { //判断data表现形式 if(empty($data)) { return $data; } return is_arr ...

  8. jquery网站左侧弹出导航菜单

    下载

  9. Java中的HashMap和Hashtable

    代码: import java.util.*; public class test{ public static void main(String[] args) { HashMap hm = new ...

  10. hdu1233(最小生成树)

    Problem Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能 ...