js刮奖处理

sweetga

2016-12-16

这个是在移动端上处理的一个刮奖小Demo

直接上完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
       	<style type="text/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
			}
		</style>
       
        <title>网红</title>
    </head>
    <body >
	    <div id='guaJiang'>
			<div class='bjc'>萌赚送你1.5</div>
			<canvas id="myCanvas" class='guaCanvas' width="240" height="70"></canvas>
		</div>
    </body>
</html>

然后是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刮奖处理