以下利用 Brython 在網頁寫 Python 繪圖
上述繪圖程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <!-- 導入 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 = 1
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))
# 定義一個畫圓的函式
def circle(ctx, x, y, radius, color='black'):
ctx.beginPath()
ctx.arc(x, y, radius, 0, 2 * math.pi, False)
ctx.fillStyle = color
ctx.fill()
ctx.lineWidth = 1
ctx.strokeStyle = '#003300'
ctx.stroke()
# 點資料數列, [ ] 為數列(list), ( ) 為元組(tuple)
points = [(10, 10), (20, 50), (20, 100), (30, 160), (70, 25), (100, 180)]
# 呼叫 circle() 函式, 畫出曲線的控制點
for i in range(len(points)):
circle(ctx, points[i][0], points[i][1], 5)
# 利用 console.log 列出控制點座標
console.log("第"+str(i+1)+"點座標為: ("+str(points[i][0])+", "+str(points[i ][1])+")")
# 開始根據控制點, 畫出對應曲線
ctx.beginPath()
ctx.moveTo(points[0][0], points[0][1])
for i in range(1, len(points)-1):
xc = (points[i][0] + points[i + 1][0]) / 2
yc = (points[i][1] + points[i + 1][1]) / 2
ctx.quadraticCurveTo(points[i][0], points[i][1], xc, yc)
#curve through the last two points
ctx.quadraticCurveTo(points[i][0], points[i][1], points[i+1][0],points[i+1][1])
ctx.stroke()
</script>
|