アコースティックギター超入門

アコースティックギター超入門

アコースティックギター超初心者のための入門ブログ

ギターコードダイアグラム(コード表)の画像を生成するJavascript「コードメーカー」をバージョンアップ(1.0)しました

ギターコードダイアグラム(コード表)の画像を生成するJavascriptをバージョンアップしました。
バージョンは1.0です。

改訂内容は「ベース音」を指定できるようにしました。

使い方

1.ヘッダーでスクリプトを読み込む

HTMLのヘッダータグで以下のスクリプトを読み込みます。

<script src="http://tsugani.com/js/chord_maker.js" charset="Shift_JIS"></script>

※このスクリプトを動作させるにはJQueryの読み込みも必要です。

2.画像を表示したい箇所にcanvasタグを書く

ギターコードダイアグラム(コード表)を表示したいところにcanvasタグを作ります。
ベース音は先頭に「B」を付けて下さい。

<canvas class="gchord" width="128px" height="128px" chordwidth="128px" chordheight="128px" chord="0|1|0|2|B3|0" chordname="C"></canvas>

実際の表示は




です。

各プロパティは

  • class名は「gchord」にします(固定で必須)。
  • widthは「128px」にします(固定で必須)。
  • heightは「128px」にします(固定で必須)。
  • chordwidthは実際の表示される画像の横幅です(指定なしの場合は「128px」)。
  • chordheightは実際の表示される画像の高さです(指定なしの場合は「128px」)。
  • chordはダイアグラムのポジションです左から1弦、2弦・・・と6弦まで指定。開放弦は「0」です。ミュートは「x」です。ベース音は先頭に「B」(必須)。
  • chordnameは表示するコード名です(必須、コード名不要の場合は""を指定)。

以上で画像を表示できます。