search

Home >Web Front-end >JS Tutorial >js scratch prize processing

js scratch prize processing

巴扎黑
巴扎黑Original
2016-12-19 14:10:321564browse

This is a small scratch-off Demo processed on the mobile terminal

Directly upload the complete code

<!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=&#39;guaJiang&#39;>
<div class=&#39;bjc&#39;>萌赚送你1.5</div>
<canvas id="myCanvas" class=&#39;guaCanvas&#39; width="240" height="70"></canvas>
</div>
    </body>
</html>

Then the JS code

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 = &#39;15px arial&#39;;
                ctx.fillStyle = &#39;white&#39;;
                ctx.fillText(&#39;您获得一次刮奖机会&#39;, 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 ? &#39;touchstart&#39; : &#39;mousedown&#39;,
                    moveEvtName = device ? &#39;touchmove&#39; : &#39;mousemove&#39;;
                
                // 判断是不是开始触摸等
                if (!device) {
                    var isMouseDown = false;
                    document.addEventListener(&#39;mouseup&#39;, function (e) {
                        isMouseDown = false;
                    }, false);
                } else {
                    document.addEventListener("touchmove", function (e) {
                        if (isMouseDown) {
                            e.preventDefault();
                        }
                    }, false);
                    document.addEventListener(&#39;touchend&#39;, 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 = &#39;destination-out&#39;;    // 关键部分，描述当在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 = &#39;destination-out&#39;;
                    fillCircle.call(ctx, x, y, touchRadius);
                    console.log("当前涂抹比例为：" + getTransparentPercent(ctx, 240, 70));
                }, false);

The rendering after running

js scratch prize processing

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript bubble sort algorithmNext article：JavaScript bubble sort algorithm

Related articles

See more