こんにちは、ユアサです。
今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチャートを想定しています。
canvas要素については以前弊社ブログ内で記事にされていますので、こちらを参考にしてみてください。
canvasで描画するために必要なJSメソッド
上記の添付記事でも説明されていますが、getElementById('ここにid名')で対象のid名が付与されている要素を取得してgetContext('2d')で描画を有効にする必要があります。
また描画開始の宣言をしなければいけないのでbeginPath()も記述します。これらを踏まえてまず以下の通りになります。
const pentagon = document.getElementById('canvas_pentagon'); //id名「canvas_pentagon」が付与されている要素を取得 const context = pentagon.getContext('2d'); //2Dグラフィック（平面図形）を描画するためのメソッドやプロパティをオブジェクトに返す if(pentagon.getContext) { context.beginPath(); //ここから描画開始の宣言 }
描画開始の宣言がされたので、ここから五角形を描画するために必要なメソッドをまとめます。六角形や八角形などの多角形の場合でも同様のパーツが必要になってきます。
- moveTo(x,y)：パスの開始位置をx・y座標で指定
- lineTo(x,y)：指定したx・y座標にラインを引く
- closePath()：パスを閉じる
- stroke()：現在のパスを輪郭表示する
より工夫した図形にするには上記以外にも必要にはなりますが、これら4点でとりあえず図形を描画することができます。
ではこれらを使用して、実際に五角形を作成してみます。
See the Pen Untitled by felly (@felly00505) on CodePen.
一通り作成してみました。実際に表示を見てみると分かるかと思いますが、moveTo()は取得しているcanvas要素の座標(0,0)を基準にして指定されたx・y座標分だけパスの開始位置が移動しています。そして同じくcanvas要素の座標(0,0)を基準にしてlineTo()で指定されたx・y座標に向かってラインが引かれています。
またfill()のメソッドを使えば図形の塗りつぶしができ、塗りつぶしや枠線の配色を指定したい場合はそれぞれfillStyle = "色の指定";とstrokeStyle = "色の指定";を使用すると実装できます。
See the Pen pentagon01_colored by felly (@felly00505) on CodePen.
さて五角形を作ることはできましたが、レーダーチャートでは基準となる正五角形の枠組みや目盛線があるはずなのでまずその形を作りたいところですよね。必要なパーツが揃ったので、次回の記事からレーダーチャートの作成の方に取り組んでいきたいと思います。
まとめ
今回はcanvasとJSを使用してレーダーチャートを作る準備として、canvas要素に五角形を描画するための必要なJSメソッドについて紹介しました。次回からは実際にレーダーチャートを作成していく予定です。
今回五角形を作ったはいいもののかなり不細工な形をしているのでさっさと正五角形に成形したいと思います・・・・。
最後まで読んでいただきありがとうございました（^人^）
