JSは円形のプログレスバーのドラッグとスライドを実装します

この記事の例では、円形のプログレスバーのドラッグアンドスライドを実現するための具体的なJSコードを紹介します。具体的な内容は次のとおりです。

エフェクト表示

半円形のプログレスバー効果

円形の進捗バー

コードの実装

<!doctypehtml>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8" />
  <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1" />
  <title> 円形の進行状況バーをドラッグしてスライドします</title>
</head>
<本文>
<キャンバスid="canvasId" 幅="400" 高さ="400"></キャンバス>
<script type="text/javascript">
    var キャンバス = document.getElementById("canvasId");
    var ctx = canvas.getContext("2d");
    var ox = 200;
    var oy = 200;
    var または = 180;
    var br = 15;
    var 移動フラグ = false;

    function offset(r,d){//ラジアンと距離に基づいてオフセット座標を計算します。 return {x: -Math.sin(r)*d, y: Math.cos(r)*d};
    };

    関数draw(n) {
        ctx.clearRect(0,0,キャンバス幅、キャンバス高さ);
        ctx.strokeStyle = "#99a";
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.arc(ox,oy,or,0,Math.PI,true);//半円// ctx.arc(ox,oy,or,0,2*Math.PI,true);//完全な円ctx.stroke();
        ctx.strokeStyle = "#69f";
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.arc(ox,oy,or,Math.PI,(n*2+0.5)*Math.PI,false);
        // ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
        ctx.stroke();
        ctx.fillStyle = "#69f";
        ctx.font = "80px Arial";
        ctx.textAlign = "中央";
        ctx.textBaseline = "中央";
        ctx.fillText(Math.round(n*100-25)+"%",ox,oy);
        ctx.fillStyle = "#00f";
        ctx.beginPath();
        var d = offset(n*2*Math.PI, または);
        ctx.arc(ox+dx,oy+dy,br,0,2*Math.PI,true);
        ctx.fill();
    }

    var on = (ドキュメント内の "ontouchstart")? {
        開始: "touchstart"、移動: "touchmove"、終了: "touchend"
    } : {
        開始: 「mousedown」、移動: 「mousemove」、終了: 「mouseup」
    };

    関数 getXY(e,obj) {
        var et = e.touches? e.touches[0] : e;
        var x = et.clientX;
        var y = et.clientY;
        戻る {
            x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft)、
            y : y - obj.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop)
        }
    }

    キャンバス.addEventListener(on.start, 関数(e) {
        移動フラグ = true;
    }、 間違い）;

    キャンバス.addEventListener(on.move, 関数(e) {
        if (フラグを移動) {
            var k = getXY(e, キャンバス);
            var r = Math.atan2(kx-ox, oy-ky);
            var hd = (Math.PI+r)/(2*Math.PI);

            // 半円のスライド範囲を決定します if (hd <= 0.75 && hd >= 0.25) {
                描画(hd);
            }
        }
    }、 間違い）;

    キャンバス.addEventListener(on.end, 関数(e) {
        移動フラグ = false;
    }、 間違い）;

    引き分け(0.25);
</スクリプト>

</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: