BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

Canvasでプログレスバー付きの非閉鎖円を描画する

2022-01-31 22:18:19
最終結果

I. 変数の定義

半径の定義、円の太さの定義、円の中心の定義、デフォルトの塗りつぶし色の定義 

let radius = 75
let thickness= 10
let innerRadius = radius - thickness
let x = 75
let y = 75
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#f2d7d7";

II. 最初の円弧を描く 

ctx.beginPath();
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)

パスを生成する最初のステップであるbeginPath()メソッドに注目してください。基本的に、パスは多くのサブパスから構成され、そのすべてがリストに入っており、そのすべて（線、円弧など）がグラフを構成しているのです。そして、このメソッドを呼び出すたびに、リストがクリアされてリセットされ、新しいグラフを再描画することができるのです。

つまり、このメソッドを呼ばなければ、Canvas画像をグループ化し、前の描画に結合されるはずの新しい描画を行うことができます

III. 最初の結合を描画する 

ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)

接続部の外側は2次ベジェ曲線で描かれ、CanvasのquadraticCurveTo(cp1x, cp1y, x, y)メソッドは、第1、第2引数を制御点、第3、第4引数を終点として、4つの引数を取ります。 公式ドキュメント
制御点と終点を数えるだけで円弧が描ける

IV. 第二の円弧を描く 

ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)

メソッドの後の最後のパラメーターは、反時計回りの描画のために true に設定されていることに注意してください (デフォルトは時計回り)。

V. 2つ目の接続を描画する 

ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

このステップは、実はステップ3とあまり変わらず、単にパラメータの位置を入れ替えただけです

VI. 塗りつぶし 

 ctx.fill();

こうして出来上がったのが、単純な非閉鎖円です。

2つ目のプログレスバーの円を描画する

VII. 初期化 

ctx.beginPath();
ctx.fillStyle = "#e87c7c";

beginPathは新しい描画を意味し、このメソッドが呼ばれない場合、後の描画はその前の描画に接続されます。

VIII. 2つ目のプログレスバーサークルを描く 

ctx.beginPath();
ctx.fillStyle = "#e87c7c";
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)
ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)
ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

ctx.fill();

円は最初のものと全く同じように描かれているので、繰り返さない、違いは円の曲率だけである

IX. キャンバスを回転させる 

transform: rotate(-135deg);

cssの回転の方が簡単で、角度の計算も不要なので、私はcssのtransformを使って回転させています。もちろん、Canvasにも回転させる方法はあります。

<ブロッククオート フルコード 

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
    <style>
        .ring {
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
        }

        #tutorial {
            transform: rotate(-135deg);
            width: 150px; 
            height: 150px;
        }

        .fraction {
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            color: red;
        }

        .small {
            font-size: 12px;
            font-weight: lighter;
        }

        .title {
            color: red;
            bottom: 0;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="ring">
        <canvas id="tutorial" width="150" height="150"></canvas>
        <span class="fraction">100 <span class="small">minutes</span> </span>
        <span class="title">service points</span>
    </div>

    <script>
        let radius = 75
        let thickness = 10
        let innerRadius = radius - thickness
        let x = 75
        let y = 75
        var canvas = document.getElementById('tutorial');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#f2d7d7";

        ctx.beginPath();
        ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
        ctx.quadraticCurveTo((x - innerRadius) - thickness/2 , y - thickness, x - innerRadius, y)
        ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
        ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = "#e87c7c";
        ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)
        ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)
        ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)
        ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
        ctx.fill();
    </script>
</body>

</html>

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します