suchen

Heim  >  Artikel  >  Web-Frontend  >  js Scratch-Preisverarbeitung

js Scratch-Preisverarbeitung

巴扎黑
巴扎黑Original
2016-12-19 14:10:321537Durchsuche

Dies ist eine kleine Rubbel-Demo, die auf dem mobilen Endgerät verarbeitet wird

Laden Sie direkt den vollständigen Code hoch

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

und dann den 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);

nach dem Ausführen von Rendering von

js Scratch-Preisverarbeitung

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-BlasensortierungsalgorithmusNächster Artikel：JavaScript-Blasensortierungsalgorithmus

In Verbindung stehende Artikel

Mehr sehen