Canvas 实现刮刮乐 js实现刮刮乐

**思路：
（1）首先需要一个盒子定位，确定刮刮乐区域想要放在哪里
（2）定位盒子里有个放内容的盒子，也就是放奖品的
（3）用一个画布(canvas)把上面的盒子盖住
（4）当手触摸移动的时候，可以擦除部分画布，露出奖品区
（5）当擦除足够多(1/3)的时候，可以选择让画布自动消失**

因为没有太多的内容,就直接上代码,有注解,要改的东西就两张图片,改一下路径就行了还有导入的jquery.js的脚本包

<!DOCTYPE html style="width: 100%; height: 100%" >
<html lang="en" style="width: 100%; height: 100%">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Cache-Control" content="no-cache"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>刮开有奖</title><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="format-detection" content="telephone=no"><meta http-equiv="x-rim-auto-match" content="none"><script src="js/jquery.js"></script><style type="text/css">* {margin: 0;padding: 0;/*   color:#666 ;*/}.box {width: 100%;height: 100%;background: url("img/Britain.jpg") no-repeat;//这是奖品的图片background-size: 100% 100%;position: absolute;z-index: 1001;/*margin: 0 auto;*/}#myCanvas {position: absolute;left: 0;top: 0;z-index: 1000;}/* 设置翻页的背景色*/.flipbook .page{background-color: #e6d3ae;}</style>
</head>
<body style="width: 100%; height: 100%;"><!--刮层-->
<div id="canve_box" class="box" style="/* display: none*/"><div id="go" style="    width: 40%; height: 6%;position: absolute;z-index: 900; background-color:red;top: 80%;left: 30%;background: url('img/goSee_03.png') ;background-size: 100% 100%;background-repeat: no-repeat; " ></div><canvas id="myCanvas" width="100" height="200" style="/*display: none*/"></canvas>
</div>
</body>
<!--刮刮层-->
<script type="text/javascript">//刮图层//设置画布的大小$("#myCanvas").attr({width: $("body").width(), height: $("body").height()});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/index.jpg";oImg.onload = function () {can.beginPath();can.drawImage(oImg, 0, 0, X, Y);can.closePath();}var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());var startEvtName = device ? "touchstart" : "mousedown";var moveEvtName = device ? "touchmove" : "mousemove";var endEvtName = 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,y);can.beginPath();can.globalCompositeOperation = "destination-out";can.arc(x, y, 20, 0, Math.PI * 2, false);can.fill();can.closePath();}/* 增加触摸监听*///true  捕获 false  冒泡myCanvas.addEventListener(startEvtName, function () {myCanvas.addEventListener(moveEvtName, draw, false);}, false);myCanvas.addEventListener(endEvtName, function () {myCanvas.removeEventListener(moveEvtName, draw, false);}, false);//扣除到一定程度,自己打开
/**
第五步要用到canvas像素点的获取
getImageData(int x,int y,int width,int height)：该方法获取canvas上从(x,y)点开始，宽为width、高为height的图片区域的数据，该方法返回的是一个CanvasPixelArray对象，该对象具有width、height、data等属性。data属性为一个数组，该数组每4个元素对应一个像素点。
**/document.addEventListener(endEvtName, function () {/* 获取imageData对象*/var imageDate = can.getImageData(0, 0, myCanvas.width, myCanvas.height);/* */var allPX = imageDate.width * imageDate.height;var iNum = 0;//记录刮开的像素点个数for (var i = 0; i < allPX; i++) {if (imageDate.data[i * 4 + 3] == 0) {iNum++;}}if (iNum >= allPX * 1 / 3) {// disappear里面写了缓慢清除的css3动画效果// myCanvas.setAttribute('class','disappear');$("#myCanvas").hide();}}, false)</script></html>

Canvas 实现刮刮乐 js实现刮刮乐相关推荐

js移动端刮奖Demo
现在刮奖的方式很多,有轮盘抽奖也有刮刮乐的方式抽奖,先在就用js处理一下刮刮乐刮奖方式(以下是移动端处理的刮奖): 直接上代码片段咯: HTML代码 <body ><div id=' ...
html刮奖特效,jQuery+HTML5手机刮刮乐刮奖代码
jQuery+HTML5手机刮刮乐刮奖代码 jQuery+HTML5手机刮刮乐刮奖代码 var _htmlFontSize = (function () { var clientWidth = doc ...
Android 自定义控件实现刮刮卡效果真的就只是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...
canvas实现聚光灯效果（js）
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
几个用于前端canvas图片查看编辑的js插件
几个用于前端canvas图片查看编辑的js插件 1 tui.image-editor 2 Konva 3 AlloyImage 4 zwibbler 5 canvasPS 6 Photo Editor ...
Canvas Confetti 五彩纸屑特效 JS 插件
介绍 canvas-confetti 是一个使用 canvas 的五彩纸屑特效 JS 插件.先看下效果: 使用方式 1.NPM 安装: npm install --save canvas-confet ...
乐视账号服务器关闭,乐视手机恢复出厂设置之后服务异常怎么办_无法登录乐视帐号解决办法_智能家...
近期由于乐视账号服务器调整,出现了乐视手机重置后登录不了乐视账号,乐视手机恢复出厂设置之后服务异常是什么原因?小明同学为大家带来了无法登录乐视帐号解决办法... 乐视手机无法登录乐视帐号解决办法乐视 ...
乐视手机android流量,乐视手机流量不能用怎么办
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 乐视手机流量不能用的原因解决方法有: 1.确认手机是否连着其它无线网络(WIFI),如果手机当前连着无线网(wifi)的情况下,是 ...
知足而乐，不知足亦乐
知足而乐,不知足亦乐前几天晚上,有一个佛教的朋友与我聊天时,在帮我解读人生真谛时,偶然谈到了知足而乐这个词语.我望着这个词语沉思了一会儿,突然有许多感悟.我在思考,知足可以得到快乐,不知足也能得到快 ...

Canvas 实现刮刮乐 js实现刮刮乐

Canvas 实现刮刮乐 js实现刮刮乐

Canvas 实现刮刮乐 js实现刮刮乐相关推荐

最新文章

热门文章