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

@language md Title:W11 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 from browser import html import math import re # 準備繪圖畫布 canvas = doc["japanflag3"] container = doc["container3"] ctx = canvas.getContext("2d") # 以下可以利用 ctx 物件進行畫圖 # 水平線 for i in range(6): ctx.beginPath() # 設定線的寬度為 1 個單位 if i == 0: ctx.lineWidth = 7 else: ctx.lineWidth = 1 ctx.moveTo(99, 100+i*30) ctx.lineTo(201, 100+i*30) # 設定顏色為藍色, 也可以使用 "rgb(0, 0, 255)" 字串設定顏色值 ctx.strokeStyle = "blue" ctx.stroke() ctx.closePath() # 垂直線 for i in range(6): ctx.beginPath() # 設定線的寬度為 1 個單位 ctx.lineWidth = 1 ctx.moveTo(100+i*20, 100) ctx.lineTo(100+i*20, 250) # 設定顏色為藍色, 也可以使用 "rgb(0, 0, 255)" 字串設定顏色值 ctx.strokeStyle = "blue" ctx.stroke() ctx.closePath() ''' # 以下將 canvas 畫布內容轉為 img tag, 並且顯示在 container 物件 img = canvas.toDataURL("image/png") # 利用 re.sub, 將原本要直接開圖檔的 data:image 標頭, 改為 data:application/octet-stream, 可直接下載存檔 # 使用 re 模組之前必須先 import re img = re.sub("^data:image\/[^;]", "data:application/octet-stream", img) # 宣告 anchor markup attribute download, 可以指定下載儲存檔名 container <= html.A("save image", href=img, download="guitar_chord.png") ''' </script>

本次修改為家一行(230 > 250)