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>