素肌にサスペンダー

個人的な備忘と日記

JavaScriptでcanvasタグで円グラフを描画する

JavaScript canvas

canvasタグをJavaScriptで制御して、グラフを描画することがあるので、メモ

フォームに何パーセントかを入力し、送信したらcanvasタグでそのパーセンテージを描画するサンプル

<!DOCTYPE html>
<html lang="ja">
<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>
</head>
<body>
  
  <!-- 描画用のcanvasタグ -->
  <canvas width="140" height="140" id="js_graph" data-percent="65"></canvas>

  <!-- パーセント送信form -->
  <form method="GET" onsubmit="setPercent();return false;">
    <input type="number" id="js_percent">
    <input type="submit" value="送信">
  </form>

  <script>

  /**
  * 円グラフ描画関数
  */ 
  function cleateCircleGraph(graphId,percent) {
    const element = document.getElementById(graphId)
    const context = element.getContext( "2d" )
    const anglePercent = 360 * ( percent / 100 )
    const angleRemain = 360 * ( (100 - percent) / 100 )
    const envWidth = parseInt(window.innerWidth)
    let canvasSize = 50

    // 以前のPathが残っているので一旦消す
    context.clearRect(0,0,200,200)

    // 余白のpath
    context.beginPath()
    context.translate(10,10)
    context.arc( canvasSize, canvasSize, canvasSize, (anglePercent - 90) * Math.PI / 180, ((anglePercent + angleRemain) - 50) * Math.PI / 180, false )
    context.strokeStyle = "#FFF"
    context.lineWidth = 10
    context.stroke()
    
    // パーセンテージのpath
    context.beginPath()
    // 角丸にしたい場合 context.lineCap = "round"
    context.arc( canvasSize, canvasSize, canvasSize, (0 - 90) * Math.PI / 180, (anglePercent - 90) * Math.PI / 180, false )
    // 角丸にしたい場合 context.lineCap = "round"
    context.strokeStyle = "#000"
    context.lineWidth = 10
    context.setTransform(1,0,0,1,0,0)
    context.stroke()
  }

  /**
  * パーセントを送信した時
  */
  function setPercent() {
    const graphId = 'js_graph'
    const percent = document.getElementById('js_percent').value
    // 円グラフ描画関数呼び出し
    cleateCircleGraph(graphId,percent)
  }

  window.onload = function () {
    const graphId = 'js_graph'
    // 初期はdata-percent属性を設定する
    const percent = document.getElementById(graphId).getAttribute('data-percent')
    // 円グラフ描画関数呼び出し
    cleateCircleGraph(graphId,percent)
  };

  </script>

</body>
</html>