11 18 - s40171225/2016fallcp_hw GitHub Wiki
@language md Title: W10 Brython 繪圖範例 Date: 2016-11-18 12:00 Category: Misc Tags: 使用導引 Author: 40171225
繪圖流程, 導入程式庫, 啟動, 然後引用各種模組開始繪圖
<script type="text/javascript" src="https://cdn.rawgit.com/brython-dev/brython/master/www/src/brython_dist.js"> </script><!-- 啟動 Brython -->
<script>
window.onload=function(){
brython(1);
}
</script>
<!-- 以下實際利用 Brython 畫兩條直線 -->
<canvas id="guitarcchord" width="600" height="200"></canvas>
<script type="text/python3">
from browser import document as doc
import math
canvas = doc["guitarcchord"]
ctx = canvas.getContext("2d")
ctx.beginPath()
ctx.lineWidth = 1
inc=10
for i in range(10):
ctx.moveTo(100+i*inc,100)
ctx.lineTo(100+i*inc,200)
inx=100
for q in range(2):
ctx.moveTo(100,100+q*inx)
ctx.lineTo(190,100+q*inx)
# 設定顏色為藍色, 也可以使用 "rgb(0, 0, 255)" 字串設定顏色值
ctx.strokeStyle = "blue"
# 實際執行畫線
ctx.stroke()
ctx.closePath()
</script>