ホームページ >ウェブフロントエンド >jsチュートリアル >jsスクラッチ景品処理

jsスクラッチ景品処理

巴扎黑オリジナル: 2016-12-19 14:10:321566ブラウズ

これはモバイル端末上で処理された小さなスクラッチオフデモです

完全なコードを直接アップロード

<!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>

次に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 = &#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);

実行後のレンダリング

jsスクラッチ景品処理

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript バブルソートアルゴリズム次の記事：JavaScript バブルソートアルゴリズム

続きを見る

jsスクラッチ景品処理

関連記事