2016 12 2 吉他版(2) - s40223228/2016fallcp_hw GitHub Wiki

@language md Title:W12 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() w=20 h=30 background(100,100,w,h,5,6,ctx) </script>

直接對倒數第二行進行修改,即可調整行列數