Guitar Chords

guitar_chord1.py

from browser import document as doc
from browser import html
import math
# 準備繪圖畫布
# 利用 html 建立一個 CANVAS 標註物件, 與變數 canvas 對應
canvas = html.CANVAS(width = 600, height = 400)
# 將 canvas 標註的 id 設為 "cango_gear"
canvas.id = "chord1"
# 將 document 中 id 為 "brython_div" 的標註
# 設為與 brython_div 變數對應
brython_div = doc["brython_div"]
# 將 canvas 標註放入 brython_div 所在位置
brython_div <= canvas
# 將頁面中 id 為 cango_gear 的 CANVAS 設為與 canvas 對應
canvas = doc["chord1"]
ctx = canvas.getContext("2d")

def background(x, y, xinc, yinc, xnum, ynum, ctx):
    # 水平線
    for i in range(ynum+1):
        ctx.beginPath()
    # 設定線的寬度為 1 個單位
        if i == 0:
            ctx.lineWidth = 7
        else:
            ctx.lineWidth = 1
        ctx.moveTo(x-1, y+i*yinc)
        ctx.lineTo(x+xnum*xinc+1, y+i*yinc)
        # 設定顏色為藍色, 也可以使用 "rgb(0, 0, 255)" 字串設定顏色值
        ctx.strokeStyle = "blue"
        ctx.stroke()
        ctx.closePath()

    # 垂直線
    for i in range(xnum+1):
        ctx.beginPath()
    # 設定線的寬度為 1 個單位
        ctx.lineWidth = 1
        ctx.moveTo(x+i*xinc, y)
        ctx.lineTo(x+i*xinc, y+ynum*yinc)
        # 設定顏色為藍色, 也可以使用 "rgb(0, 0, 255)" 字串設定顏色值
        ctx.strokeStyle = "blue"
        ctx.stroke()
        ctx.closePath()

def canvasText(x, y, fontSize, string, sup, sub, color, ctx):
    # 標定各弦音符號, 以及把位編號
    ctx.beginPath()
    ctx.fillStyle = color
    ctx.strokeStyle = color
    #ctx.font = "20px Arial"
    ctx.font = str(fontSize)+ "px Arial"
    ctx.fillText(string, x, y)
    ctx.font = str(fontSize-8)+ "px Arial"
    if sup != "":
        ctx.fillText(sup, x+fontSize/1.6, y-fontSize/2)
    if sub != "":
        ctx.fillText(sup, x+fontSize/1.6, y)
    ctx.fill()
    ctx.stroke()
    ctx.closePath()

w = 20
h = 30
background(100, 100, w, h, 5, 5, ctx)
mylist = ["E", "A", "D", "G", "B", "E"]
num = 0
for s in mylist:
    #canvasText(100,  80, 20, "A", "b", "", "black", ctx)
    canvasText(100+num*w,  80, 20, s, "", "", "black", ctx)
    num = num + 1