Canvas 畫布
Canvas 是 tkinter 裡用來可以讓使用者透過程式「繪圖」的畫布，這篇教學會介紹如何在 tkinter 視窗裡加入 Canvas 畫布，並在 Canvas 裡繪製各種形狀。
快速導覽：
因為 Google Colab 不支援 tkinter，所以請使用本機環境 ( 參考：使用 Python 虛擬環境 ) 或使用 Anaconda Jupyter 進行實作 ( 參考：使用 Anaconda )。
加入 Canvas
建立 tkinter 視窗物件後，透過 Canvas 方法，就能在視窗物件中建立 Canvas 畫布，必要的參數有一個，表示要加入的視窗物件，建立 Canvas 後再使用 pack() 方法將其加入 ( 參考 pack 參數設定 )，下方的程式碼執行後，會在視窗裡加入一個 Canvas ( 大小設定為 300x300 )。
import tkinter as tk
root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x300')
canvas = tk.Canvas(root, width=300, height=300) # 加入 Canvas 畫布
canvas.pack()
root.mainloop()
Canvas 參數設定
加入 Canvas 之後，可以透過 Canvas 的參數調整內容的樣式，下方列出 Canvas 和其他元件相同的參數：
| 參數 | 說明 |
|---|---|
| anchor | 擺放位置，可以設定 n、s、w、e、ne、nw、sw、se、center ( e 右，w 左，s 下，n 上 )，預設 center。 |
| width | 寬度，單位是字元數，預設 0。 |
| height | 高度，單位是字元數，預設 0。 |
| padx | 內容和標籤左右邊界的間距 ( px )，預設 1。 |
| pady | 內容和標籤上下邊界的間距 ( px )，預設 1。 |
| bg/background | 背景顏色，可以使用十六進位色碼或顏色名稱。 |
| cursor | 滑鼠移動到標籤的樣式，可以設定 arrow、circle、cross、plus...等，預設 arrow。 |
| relief | 邊框樣式，可以設定 flat、sunken、raised、groove、ridge、solid，預設 flat。 |
| bd/borderwidth | 邊框粗細，預設 1。 |
create_text() 繪製文字
使用 Canvas 的 create_text() 方法，可在 Canvas 元件中加入文字，使用方法如下：
canvas.create_text(x, y, text, anchor, fill, font)
相關參數說明：
| 參數 | 說明 |
|---|---|
| x, y | 文字在 Canvas 的座標位置 ( 如果沒有設定 anchor 則是中心點座標，如果有設定 anchor 則是設置的端點座標 )。 |
| text | 文字內容。 |
| anchor | 可以設定 n、s、w、e、ne、nw、sw、se、center ( e 右，w 左，s 下，n 上 )，預設 center。 |
| fill | 文字顏色，可使用名稱或十六進位色碼。 |
| font | 文字樣式，參數依序為 ( 字體, 大小, 粗細, 斜體, 底線 )。 |
下方的例子執行後，會在 Canvas 畫布中加入四段文字。
import tkinter as tk
root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x300')
canvas = tk.Canvas(root, width=300, height=300)
canvas.create_text(10, 0, text='hello', anchor='nw')
canvas.create_text(20, 20, text='world', anchor='nw', font=('Arial', 20))
canvas.create_text(30, 40, text='I am\nOXXO', anchor='nw', fill='#f00', font=('Arial', 30, 'bold'))
canvas.create_text(40, 110, text='中文測試', anchor='nw', fill='#0a0', font=('Arial', 30, 'bold','italic','underline'))
canvas.pack()
root.mainloop()
create_line() 繪製直線
使用 Canvas 的 create_line() 方法，可在 Canvas 元件中加入直線，使用方法如下：
canvas.create_line(x1, y1, x2, y2, width, fill, dash)
相關參數說明：
| 參數 | 說明 |
|---|---|
| x1, y1 | 直線起點座標。 |
| x2, y2 | 直線終點座標。 |
| width | 直線粗細。 |
| fill | 直線顏色，可使用名稱或十六進位色碼。 |
| dash | 虛線設定，有兩個數值，第一個是虛線裡的實線長度，第二個是間隔寬度。 |
下方的例子執行後，會在 Canvas 畫布中加入四條直線。
import tkinter as tk
root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x300')
canvas = tk.Canvas(root, width=300, height=300)
canvas.create_line(10, 10, 200, 10)
canvas.create_line(10, 30, 200, 30, width=10)
canvas.create_line(10, 50, 200, 150, width=10, fill='#f00')
canvas.create_line(10, 70, 200, 200, width=10, fill='#0a0', dash=(10,2))
canvas.pack()
root.mainloop()
create_rectangle() 繪製矩形
使用 Canvas 的 create_rectangle() 方法，可在 Canvas 元件中加入矩形 ( 四邊形 )，使用方法如下：
canvas.create_rectangle(x1, y1, x2, y2, width, fill, outline, dash)
相關參數說明：
| 參數 | 說明 |
|---|---|
| x1, y1 | 矩形左上角座標。 |
| x2, y2 | 矩形右下角座標。 |
| width | 邊框粗細。 |
| fill | 填滿顏色，可使用名稱或十六進位色碼。 |
| outline | 邊框顏色，可使用名稱或十六進位色碼。 |
| dash | 虛線設定，有兩個數值，第一個是虛線裡的實線長度，第二個是間隔寬度。 |
下方的例子執行後，會在 Canvas 畫布中加入五個矩形。
import tkinter as tk
root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x300')
canvas = tk.Canvas(root, width=300, height=300)
canvas.create_rectangle(10, 10, 50, 100)
canvas.create_rectangle(60, 10, 110, 100, width=8)
canvas.create_rectangle(120, 10, 170, 100, width=8, fill='#f00')
canvas.create_rectangle(180, 10, 230, 100, width=8, fill='#f00', outline='#00f')
canvas.create_rectangle(240, 10, 290, 100, width=3, fill='#fff', outline='#0a0', dash=(5,5))
canvas.pack()
root.mainloop()
create_oval() 繪製橢圓形、圓形
使用 Canvas 的 create_oval() 方法，可在 Canvas 元件中加入橢圓形或圓形，使用方法如下：
canvas.create_oval(x1, y1, x2, y2, width, fill, outline, dash)
相關參數說明：
| 參數 | 說明 |
|---|---|
| x1, y1 | 橢圓形或圓形左上角座標。 |
| x2, y2 | 橢圓形或圓形右下角座標。 |
| width | 邊框粗細。 |
| fill | 填滿顏色，可使用名稱或十六進位色碼。 |
| outline | 邊框顏色，可使用名稱或十六進位色碼。 |
| dash | 虛線設定，有兩個數值，第一個是虛線裡的實線長度，第二個是間隔寬度。 |
下方的例子執行後，會在 Canvas 畫布中加入五個橢圓形還有五個圓形。
import tkinter as tk
root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x300')
canvas = tk.Canvas(root, width=300, height=300)
canvas.create_oval(10, 10, 50, 100)
canvas.create_oval(60, 10, 100, 100, width=8)
canvas.create_oval(110, 10, 150, 100, width=8, fill='#f00')
canvas.create_oval(160, 10, 200, 100, width=8, fill='#f00', outline='#00f')
canvas.create_oval(210, 10, 250, 100, width=3, fill='#fff', outline='#0a0', dash=(5,5))
canvas.create_oval(10, 120, 50, 160)
canvas.create_oval(60, 120, 100, 160, width=8)
canvas.create_oval(110, 120, 150, 160, width=8, fill='#f00')
canvas.create_oval(160, 120, 200, 160, width=8, fill='#f00', outline='#00f')
canvas.create_oval(210, 120, 250, 160, width=3, fill='#fff', outline='#0a0', dash=(5,5))
canvas.pack()
root.mainloop()
create_arc() 繪製圓弧
使用 Canvas 的 create_arc() 方法，可在 Canvas 元件中加入圓弧，使用方法如下：
canvas.create_arc(x1, y1, x2, y2, start, extent, style, width, fill, outline, dash)
相關參數說明：
| 參數 | 說明 |
|---|---|
| x1, y1 | 圓弧左上角座標。 |
| x2, y2 | 圓弧右下角座標。 |
| start | 起始角度，預設 0，正值逆時針，負值順時針。 |
| extent | 總角度，正值逆時針，負值順時針。 |
| style | 圓弧樣式，可設定 arc、pieslice ( 預設 )、chord。 |
| width | 邊框粗細。 |
| fill | 填滿顏色，可使用名稱或十六進位色碼。 |
| outline | 邊框顏色，可使用名稱或十六進位色碼。 |
| dash | 虛線設定，有兩個數值，第一個是虛線裡的實線長度，第二個是間隔寬度。 |
下方的例子執行後，會在 Canvas 畫布中加入六個圓弧形。
import tkinter as tk
root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x300')
canvas = tk.Canvas(root, width=300, height=300)
canvas.create_arc(10, 10, 100, 100, extent=180)
canvas.create_arc(110, 10, 200, 100, start=60, extent=180)
canvas.create_arc(210, 10, 300, 100, start=60, extent=70, width=8, fill='#f00')
canvas.create_arc(10, 110, 100, 200, start=60, extent=180, width=8, fill='#f00', outline='#00f')
canvas.create_arc(110, 110, 200, 200, start=-60, extent=-120, width=3, fill='#fff', outline='#0a0', dash=(5,5))
canvas.create_arc(210, 110, 300, 200, start=-60, extent=-90, width=3, fill='#ff0', outline='#f50', dash=(5,10), style='arc')
canvas.pack()
root.mainloop()
create_polygon() 繪製多邊形
使用 Canvas 的 create_polygon() 方法，可在 Canvas 元件中加入多邊形，使用方法如下：
canvas.create_polygon(arr , width, fill, outline, dash)
相關參數說明：
| 參數 | 說明 |
|---|---|
| arr | 多邊形座標串列，兩兩一組 [x1,y1,x2,y2,x3,y3....]。 |
| width | 邊框粗細。 |
| fill | 填滿顏色，可使用名稱或十六進位色碼。 |
| outline | 邊框顏色，可使用名稱或十六進位色碼。 |
| dash | 虛線設定，有兩個數值，第一個是虛線裡的實線長度，第二個是間隔寬度。 |
下方的例子執行後，會在 Canvas 畫布中加入四個多邊形。
import tkinter as tk
root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x300')
canvas = tk.Canvas(root, width=300, height=300)
canvas.create_polygon([10,10, 100,10, 50,50, 20,100], outline='#f00')
canvas.create_polygon([110,10, 200,10, 150,50, 120,100], outline='#f00', fill='')
canvas.create_polygon([10,110, 100,110, 50,150, 20,200], outline='#0a0', fill='#fff', width=5)
canvas.create_polygon([110,110, 200,110, 150,150, 120,200], outline='#f00', fill='', width=3, dash=(5,5))
canvas.pack()
root.mainloop()
create_image() 繪製圖像
使用 Canvas 的 create_image() 方法，可在 Canvas 元件中加入圖像，使用方法如下：
canvas.create_image(x, y, anchor, image)
相關參數說明：
| 參數 | 說明 |
|---|---|
| x, y | 圖像在 Canvas 的座標位置 ( 如果沒有設定 anchor 則是中心點座標，如果有設定 anchor 則是設置的端點座標 )。 |
| anchor | 擺放位置，可以設定 n、s、w、e、ne、nw、sw、se、center ( e 右，w 左，s 下，n 上 )，預設 center。 |
| image | 指向 tk 圖像物件。 |
下方的例子執行後，會在 Canvas 畫布中加入圖像 ( 因為 tkinter 的 Photoimage 方法支援度不高又容易失效，所以使用 Pillow 函式庫的 ImageTk.Photoimage 建立 tk 圖片物件 )。
import tkinter as tk
from PIL import Image, ImageTk
root = tk.Tk()
root.title('oxxo.studio')
root.geometry('300x300')
img = Image.open('mona.jpg')
tk_img = ImageTk.PhotoImage(img)
canvas = tk.Canvas(root, width=300, height=300)
canvas.create_image(0, 0, anchor='nw', image=tk_img)
canvas.pack()
root.mainloop()
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～