Python教學

Python tkinter Canvas 用法與範例

本篇 ShengYu 介紹 Python tkinter Canvas 用法與範例，在 Python tkinter 裡可以使用 Canvas 來進行圖形的繪製，透過繪製一些基本的點、直線、矩形、圓型等等，進而組成自己需要的圖形，

以下的 Python tkinter Canvas 用法與範例將分為這幾部分，

  • 建立 tkinter Canvas
  • tkinter Canvas create_text 繪製文字
  • tkinter Canvas create_line 繪製直線
  • tkinter Canvas create_rectangle 繪製矩形
  • tkinter Canvas create_oval 繪製圓形、橢圓
  • tkinter Canvas create_arc 繪製圓弧
  • tkinter Canvas create_polygon 繪製多邊形
  • tkinter Canvas create_image 繪製影像

建立 tkinter Canvas

tkinter 簡單建立 Canvas 的用法如下，

python3-canvas.py
1
2
3
4
5
6
7
8
9
10
11
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=300, height=200)
mycanvas.pack()

root.mainloop()

結果圖如下，

tkinter Canvas create_text 繪製文字

tkinter Canvas 繪製文字帶入的(x,y)座標是文字中心的座標，而不是文字的左上角座標，這點跟其它大部分 GUI api 比較不一樣，但是我們可以設定 anchor 參數來改變這件事，anchor=’nw’ 就可以將該座標表示為繪製的文字的左上表座標，如下例中的 123456 文字，

python3-canvas-create_text.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=300, height=200)
mycanvas.pack()

mycanvas.create_text(100, 50, text='Hello World')
mycanvas.create_text(100, 100, text='Python tkinter', font=('Arial', 18))
mycanvas.create_text(0, 0, text='123456', anchor='nw')

root.mainloop()

結果圖如下，

tkinter Canvas create_line 繪製直線

tkinter Canvas create_line 繪製直線時需要傳入兩組座標以上 (x1, y1) 與 (x2, y2) … (xn, yn)，dash 參數是設定成虛線像式，width 參數是設定線條寬度，fill 參數則是設定線條顏色，

python3-canvas-create_line.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=300, height=200)
mycanvas.pack()

mycanvas.create_line(20, 20, 280, 20)
mycanvas.create_line(20, 40, 280, 40, dash=(4, 4))
mycanvas.create_line(20, 60, 280, 60, width=5)
mycanvas.create_line(20, 80, 280, 80, fill='red')

root.mainloop()

結果圖如下，

tkinter Canvas create_rectangle 繪製矩形

tkinter Canvas create_rectangle 繪製矩形時是帶入兩個座標 (x1, y1) 與 (x2, y2)，(x1, y1) 為矩形的左上角座標，(x2, y2) 為矩形的右下角座標，dash 參數是設定成虛線像式，fill 參數則是設定矩形內的填充顏色，outline 參數是設定矩形的線條顏色，

python3-canvas-create_rectangle.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=400, height=200)
mycanvas.pack()

mycanvas.create_rectangle(10, 10, 90, 100)
mycanvas.create_rectangle(110, 10, 190, 100, dash=(4, 4))
mycanvas.create_rectangle(210, 10, 290, 100, fill='red')
mycanvas.create_rectangle(310, 10, 390, 100, outline='blue')

root.mainloop()

結果圖如下，

tkinter Canvas create_oval 繪製圓形、橢圓

tkinter Canvas 繪製圓形、橢圓時都是使用 create_oval 函式，傳入的 (x1, y1) 與 (x2, y2) 分別為圓形/橢圓外圍的矩形的左上角座標與右下角座標，fill 參數是設定圓形或橢圓內的填充顏色，outline 則是設定圓形或橢圓的線條顏色，

python3-canvas-create_oval.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=320, height=200)
mycanvas.pack()

mycanvas.create_oval(10, 10, 100, 100) # 圓形
mycanvas.create_oval(110, 10, 200, 100, fill='red') # 圓形
mycanvas.create_oval(210, 10, 300, 100, outline='blue') # 圓形
mycanvas.create_oval(10, 110, 290, 190) # 橢圓

root.mainloop()

結果圖如下，

tkinter Canvas create_arc 繪製圓弧

tkinter Canvas 繪製圓弧是使用 create_arc 函式，傳入的 (x1, y1) 與 (x2, y2) 分別為矩形的左上角座標與右下角座標，extent 參數是繪製圓弧的角度，範圍值是 1-359，0 跟 360 則會變成直線，預設是90，style 參數有三種樣式，ARC PIESLICE CHORD 三種可以選擇，預設是 PIESLICE。

python3-canvas-create_arc.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=350, height=200)
mycanvas.pack()

mycanvas.create_arc(10, 10, 100, 100)
mycanvas.create_arc(110, 10, 200, 100, extent=45)
mycanvas.create_arc(210, 10, 300, 100, extent=180)

mycanvas.create_arc(10, 110, 100, 210, style=tk.ARC)
mycanvas.create_arc(110, 110, 200, 210, style=tk.PIESLICE)
mycanvas.create_arc(210, 110, 300, 210, style=tk.CHORD)

root.mainloop()

結果圖如下，

tkinter Canvas create_polygon 繪製多邊形

tkinter Canvas 繪製多邊形是使用 create_polygon 函式，需要傳入兩組座標以上 (x1, y1) 與 (x2, y2) … (xn, yn)，fill 參數是設定多邊形內的填充顏色，outline 則是設定多邊形的線條顏色，

python3-canvas-create_polygon.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk

root = tk.Tk()
root.title('my window')

mycanvas = tk.Canvas(root, width=300, height=200)
mycanvas.pack()

mycanvas.create_polygon(40,40, 60,20, 80,40, 80,80, 40,80)
mycanvas.create_polygon(100,40, 120,20, 140,40, 140,80, 100,80, fill='', outline='black')
mycanvas.create_polygon(160,80, 200,80, 180,20, fill='yellow')
mycanvas.create_polygon(220,80, 260,80, 240,20, fill='red', outline='black')

root.mainloop()

結果圖如下，

tkinter Canvas create_image 繪製影像

由於 tkinter 的 PhotoImage 只能支援 GIF 與 PGM/PPM 的圖片格式，要讀取 jpg 的話就要花點功夫，這邊我們使用 PIL 套件來輔助完成，
如果你之前還沒安裝過 Python 的 PIL 套件的話，可以透過 sudo apt install python3-pil 指令來安裝，這邊還需要安裝 PIL 與 tkinter 的影像轉換套件 ImageTk，透過 sudo apt install python3-pil.imagetk 即可完成安裝，

在繪製影像時可以調整 anchor 參數，anchor 參數是設定影像輸出在該區域的位置，預設是 anchor=tk.CENTER 表示會以傳入的座標為影像中心，這邊我們改成 anchor=tk.NW 表示傳入的該座標為影像的左上角，如下例中的 (0,0) 為影像的左上角。

NW：左上
N：上
NE：右上
W：左
CENTER：中
E：右
SW：左下
S：下
SE：右下
tkinter 允許你可以用小寫的字串來作設定，例如：anchor='nw'

python3-canvas-create_image.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import tkinter as tk
from PIL import Image, ImageTk

root = tk.Tk()
root.title('my window')

img = Image.open('lena.jpg')
img2 = ImageTk.PhotoImage(img)
#img2 = tk.PhotoImage(file='lena.gif')

mycanvas = tk.Canvas(root, width=img.size[0], height=img.size[1])
mycanvas.pack()

mycanvas.create_image(0,0, anchor=tk.NW, image=img2)

root.mainloop()

結果圖如下，

以上就是 Python tkinter Canvas 用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！
對 PIL 有興趣的可以參考這邊的文章。

其它相關文章推薦
Python 新手入門教學懶人包
Python tkinter 新手入門教學