2016 12 3 吉他版升降音 - s40223228/2016fallcp_hw GitHub Wiki

@language md Title:W12-2 Brython 繪圖範例 Date: 2016-11-18 02:09 Category:Course Tags:Brython Author: 40223228

繪圖流程, 導入程式庫, 啟動, 然後引用各種模組開始繪圖

<script type="text/javascript" src="https://cdn.rawgit.com/brython-dev/brython/master/www/src/brython_dist.js"> </script> <script> window.onload=function(){ brython(1); } </script> <script type="text/python3"> from browser import document as doc import math # 準備繪圖畫布 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) canvasText(100, 80, 20, "A", "b", "", "black", ctx) </script>

主要核心為最後一行 :(x軸座標,y軸座標,字體大小,輸入字元(大),輸入字元(小),不輸入空白,字體顏色,ctx)