Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

HTML5のCanvasを利用してギターのスケールを表示

ギターのスケールポジションをキーに合わせてさっと表示してくれるものがあると、作曲したりフレーズを考えたりする場合に便利かなと思い、半分思い付きでつくることにしました。

 

まずはイメージをさっとメモ。

guitar_scale_memo

概要は

  • キーとスケールを選択するとそのスケールポジションを表示してくれる
  • ルートポジションは目立つように色を付ける。

こんな感じです。

 

イメージは固まったのであとは実装するだけ。

実装手段は何でもよかったのですが、練習がてらHTML5Canvasを使ってみることにしました。まともにCanvas使うのは初めてです。

 

そしていま実装中のやつ。

guitar_scale

 

ほぼ完成しており、あとは細かい部分の実装のみ。

完成したら公開します。