<!-- 導入 brython.js -->

<script type="text/javascript" src="js/Brython3.2.3-20151122-082712/brython.js"></script>

<!-- 啟動 brython() -->

<script>
window.onload=function(){
brython(1);
}
</script>

<!-- 以下利用 Brython 程式執行繪圖 -->

<canvas id="plotarea" width="300" height="200"></canvas>

<script type="text/python3">
# 導入 doc
from browser import document as doc
from browser import console
import math

# 準備繪圖畫布
canvas = doc["plotarea"]
ctx = canvas.getContext("2d")

# 開始畫直線
ctx.beginPath()
ctx.lineWidth = 5
ctx.moveTo(0, 0)
ctx.lineTo(100, 100)
ctx.strokeStyle = "#FF0000"
ctx.stroke()

ctx.beginPath()
ctx.lineWidth = 5
ctx.moveTo(100, 0)
ctx.lineTo(0, 100)
ctx.strokeStyle = "#0000ff"
ctx.stroke()

x = 100
y = 100

# 利用 browser 模組中的 console.log 將資料列印在 console 區, 可以用來確認程式中各變數的值, 用法等同 print
console.log("x 值為"+str(x)+", y 值為"+str(y))

# 利用迴圈畫水平線
for i in range(5):
    ctx.beginPath()
    ctx.lineWidth = 5
    ctx.moveTo(0, 10+i*20)
    ctx.lineTo(100, 10+i*20)
    ctx.strokeStyle = "#0000ff"
    ctx.stroke()
</script>

</script>