Canvas 画布

Canvas 是 tkinter 里用来可以让用户透过程序“绘图”的画布，这篇教学会介绍如何在 tkinter 视窗里加入 Canvas 画布，并在 Canvas 里绘制各种形状。

快速导览：

• 加入 Canvas
• Canvas 参数设定
• create_text() 绘制文字
• create_line() 绘制直线
• create_rectangle() 绘制矩形
• create_oval() 绘制椭圆形、圆形
• create_arc() 绘制圆弧
• create_polygon() 绘制多边形
• create_image() 绘制图像

因为 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 和其他元件相同的参数：

create_text() 绘制文字

使用 Canvas 的 create_text() 方法，可在 Canvas 元件中加入文字，使用方法如下：

canvas.create_text(x, y, text, anchor, 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)

相关参数说明：

下方的例子执行后，会在 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)

相关参数说明：

下方的例子执行后，会在 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)

相关参数说明：

下方的例子执行后，会在 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)

相关参数说明：

下方的例子执行后，会在 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)

相关参数说明：

下方的例子执行后，会在 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)

相关参数说明：

下方的例子执行后，会在 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()

意见反馈