js移动端刮奖Demo

现在刮奖的方式很多，有轮盘抽奖也有刮刮乐的方式抽奖，先在就用js处理一下刮刮乐刮奖方式（以下是移动端处理的刮奖）：

直接上代码片段咯:

HTML代码

<body ><div id='guaJiang'><div class='bjc'>萌赚送你1.5</div><canvas id="myCanvas" class='guaCanvas' width="240" height="70"></canvas></div></body>

CSS样式

 #guaJiang .bjc {color: black;height: 70px;width: 240px;text-align: center;line-height: 70px;font-size: 20px;position: absolute;top: 300px;left: 60px;background-image: url(img/4-01.png);background-repeat: no-repeat;background-size: 18px 18px;background-position: 80% 53%}#guaJiang .guaCanvas {z-index: 3;position: absolute;top: 300px;left: 60px}

JS代码

var clientWidth = document.documentElement.clientWidth;if(clientWidth *1 >0){document.querySelector("#guaJiang .bjc").style.left = (clientWidth - 240)/2 + "px";document.querySelector("#guaJiang .guaCanvas").style.left = (clientWidth - 240)/2 + "px";}// 得到画笔var cvs = document.getElementById("myCanvas"),ctx = cvs.getContext("2d"),touchRadius = 10;    // 默认手指触摸半径，可以自定义设置// 默认填充灰色来遮住文字ctx.fillStyle = "#ccc";ctx.fillRect(0, 0, 240, 70);    // fillRect，用矩形填充ctx.font = '15px arial';ctx.fillStyle = 'white';ctx.fillText('您获得一次刮奖机会', 56,40);// 画园的方法// @param { integer } 圆心的x坐标// @param { integer } 圆心的y坐标// @param { integer } 圆心半径// @param { string } 填充的颜色（本例中会通过其余代码设置为‘透明’，所以这个设置可以忽略）var fillCircle = function (x, y, radius, fillColor) {this.fillStyle = fillColor || "#eee";this.beginPath();this.moveTo(x-90, y-300);this.arc(x-90, y-300, radius, 0, Math.PI * 2, false);    // 标准画圆this.fill();};// 得到涂抹的百分比var getTransparentPercent = function (ctx, width, height) {var imgData = ctx.getImageData(0, 0, width, height),    // 得到canvas的像素信息pixles = imgData.data,transPixs = [];for (var i = 0, j = pixles.length; i < j; i += 4) {    // 因为存储的结构为[R, G, B, A]，所以要每次跳4个长度var a = pixles[i + 3];    // 拿到存储alpha通道的值if (a === 0) {    // alpha通道为0，就代表透明transPixs.push(i);}}return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);}// 需要判断是PC还是手机var device = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()),clickEvtName = device ? 'touchstart' : 'mousedown',moveEvtName = device ? 'touchmove' : 'mousemove';// 判断是不是开始触摸等if (!device) {var isMouseDown = false;document.addEventListener('mouseup', function (e) {isMouseDown = false;}, false);} else {document.addEventListener("touchmove", function (e) {if (isMouseDown) {e.preventDefault();}}, false);document.addEventListener('touchend', function (e) {isMouseDown = false;}, false);}// 开始移动cvs.addEventListener(clickEvtName, function (e) {isMouseDown = true;var x = (device ? e.touches[0].clientX : e.clientX);var y = (device ? e.touches[0].clientY : e.clientY);ctx.globalCompositeOperation = 'destination-out';    // 关键部分，描述当在canvas上再次绘画时候的情况，这个设置便是之前所说的透明fillCircle.call(ctx, x, y, touchRadius);console.log("当前涂抹比例为：" + getTransparentPercent(ctx, 240, 70));}, false);// 移动中cvs.addEventListener(moveEvtName, function (e) {if (!device && !isMouseDown) {return false;}var x = (device ? e.touches[0].clientX : e.clientX);var y = (device ? e.touches[0].clientY : e.clientY);ctx.globalCompositeOperation = 'destination-out';fillCircle.call(ctx, x, y, touchRadius);console.log("当前涂抹比例为：" + getTransparentPercent(ctx, 240, 70));}, false);

所需图片（附件），运行效果如下

js移动端刮奖Demo相关推荐

移动端原生 js + canvas 实现刮奖效果（适配rem布局）
效果思路使用 canvas 绘制刮奖灰色遮罩部分监听 touchstart.touchmove 和 touchend 事件在事件中处理擦除效果 rem 环境本文的 rem 布局基础为:基于宽 ...
用原生js实现刮奖效果
用原生js实现简单的刮奖效果效果图分析:这是运用canvas来做的,页面结构为一个canvas和一张图片.canvas在最上层,图片在最下层.canvas与图片宽高一致.首先在canvas上填充灰 ...
HTML5实现刮奖效果
原文:HTML5实现刮奖效果要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
入门canvas - 通过刮奖效果来学习
一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
简单入门canvas - 通过刮奖效果来学习
一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
canvas刮奖效果
上次写刮奖效果都一年前了,那时候还是百度找的源码给改的,自己其实也是迷迷糊糊的,这次因为让妹子写,然后想着自己也重新整理下. <!DOCTYPE html> <html> &l ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
JavaScript刮奖效果(jquery图片刮奖插件)
原文出处: http://www.codefans.net/jscss/code/4593.shtml jquery.scratchie.js图片刮奖插件实例演示代码,可实现类似刮奖的效果,刮刮乐中的 ...

js移动端刮奖Demo

js移动端刮奖Demo相关推荐

最新文章

热门文章