最終レンダリング1. 変数を定義する
半径を定義し、リングの厚さを定義し、円の中心位置を定義し、デフォルトの塗りつぶしの色を定義します。
let 半径 = 75let 厚さ = 10let innerRadius = 半径 - 厚さlet x = 75let y = 75var Canvas = document.getElementById('tutorial');var ctx = Canvas.getContext('2d');ctx.fillStyle = #f2d7d7; 2.最初の円弧を描きますctx.beginPath();ctx.arc(x, y, 半径, Math.PI * 1.5, Math.PI)
パス生成の最初のステップである beginPath() メソッドに注目してください。基本的に、パスは多くのサブパスで構成されており、それらはすべてリスト内にあり、すべてのサブパス (線、円弧など) が形状を形成します。このメソッドが呼び出されるたびに、リストはクリアされてリセットされ、新しいグラフを再描画できます。
つまり、このメソッドを使用して Canvas イメージをグループ化し、新しいグラフィックを描画することができます。このメソッドが呼び出されない場合、新しいグラフィックは前のグラフィックに接続されます。
3. 最初の接続を描画しますctx.quadraticCurveTo((x - innerRadius) - 厚さ / 2, y - 厚さ, x - innerRadius, y)
接続は 2 次ベジェ曲線を使用して描画されます。Canvas のquadraticCurveTo(cp1x, cp1y, x, y) メソッドは 4 つのパラメーターを受け入れ、3 番目と 4 番目のパラメーターは終点になります。公式文書
円弧を描くための制御点と終点を把握するだけです
4. 2 番目の円弧を描きますctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
メソッドの後の最後のパラメータに注意してください。これを true に設定します。これは、反時計回りに描画することを意味します (デフォルトは時計回り)。
5. 2 番目の接続を描画しますctx.quadraticCurveTo(y - 厚さ, (x - innerRadius) - 厚さ / 2, x, y - innerRadius - 厚さ)
このステップは実際には 3 番目のステップとあまり変わりません。単にパラメータの位置を変更しただけです。
6.充填ctx.fill();
この時点で、単純な閉じていないリングが完成します
2 番目のプログレス バー リングを描画します
7. 初期化ctx.beginPath();ctx.fillStyle = #e87c7c;
beginPath は、新しいグラフィックを描画することを意味します。このメソッドが呼び出されない場合、後で描画されるグラフィックは以前に描画されたグラフィックに接続されます。
8. 2 番目のプログレスバーリングを描画しますctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, 半径, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + innerRadius) + 厚さ / 2, y + 厚さ, x + innerRadius, y)ctx.arc(x, y, innerRadius, Math.PI * 2、Math.PI * 1.5、true)ctx.quadraticCurveTo(y - 厚さ, (x - innerRadius) - 厚さ / 2, x, y - innerRadius - 厚さ)ctx.fill();
描画方法は最初の円とまったく同じなので、繰り返す必要はありません。違いは円の円弧だけです。
9. キャンバスを回転する変換: 回転(-135度);
CSS 回転の方が便利で角度の計算も省略できるので、CSS 変換を使用して回転します。もちろん、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 -互換コンテンツ=ie=edge> <title>canvas</title> <style> .ring {幅: 150px 高さ: 150px; flex; 整列項目: 中央; フレックス方向: 位置: 相対; } #tutorial { 変換: 幅: 150px; }絶対; フォントサイズ: 30px; フォントの太さ: 太字; } .small { フォントサイズ: 12px;フォントの重さ: 軽い; } .title { カラー: 赤; 位置: 絶対 } </style></head><body> <div class=ring> <canvas id=tutorial width=150 height= 150></canvas> <span class=fraction>100 <span class=small>ポイント</span> </span> <span class=title>サービス ポイント</span> </div> <script> let radius = 75 let 厚さ = 10 let innerRadius = 半径 - 厚さ let x = 75 let y = 75 var Canvas = document.getElementById('tutorial') var ctx = Canvas.getContext('2d'); ctx.beginPath(); ctx.arc(x, y, 半径, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - 厚さ/2 , y - 厚さ, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - 厚さ, (x - innerRadius) - 厚さ / 2, x, y - innerRadius -厚さ) ctx.fill(); ctx.fillStyle = #e87c7c(x, y, 半径, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + 厚さ / 2, y + 厚さ, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - 厚さ, (x - innerRadius) - 厚さ / 2, x, y - innerRadius - 厚さ) ctx.fill(); </script></body></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。