作成日 : 2021-06-24
更新日 : 2021-11-04
25 min readPythonTkinter

Tkinterで使われるcanvasとは?canvasの作成方法を徹底解説

今回はTkinterで使われるcanvas Widgetの作成方法に関して、徹底解説いたします。canvas Widgetの作成方法がわからない、canvasに関して詳しく知りたい方へおすすめです。ぜひ最後までご覧ください。

そもそもTkinterで利用されるcanvas Widgetとは?

Tkinterで利用されるcanvas Widgetとは、Widgetの一種で様々な図形や画像を描画するものを意味します。

具体的にどのような図形や画像を描画するのか説明すると、

• 直線(折線)
• 楕円
• 扇形
• 矩形
• 多角形
• 画像
• 文字列
• Widget

など多岐にわたります。

聞き慣れない言葉がいくつか出てきましたね。。以下の「Tkinterの構成要素」を確認しながら、理解を深めましょう。

Tkinterの構成要素

Tkinterの構成要素として、Window, Frame, Widgetの概念が存在します。

前の章でTkinterで活用されるcanvas Widgetとは、Widgetの一種で様々な図形や画像を描画するものとお伝えしました。

「Tkinterの構成要素」の画像内では、青色枠に該当するWidgetに対して、編集することになります。

Tkinterの構成要素を理解したところで、実際にcanvas Widgetの作成方法を理解していきましょう。

下準備

今回は先ほど紹介した「Tkinterの構成要素」の画像を元に、canvas Widgetの作成方法をお伝え致します。

下にコードを貼り付けておきますので、画像と見比べながら、コードを確認してみてください。できればコードに触れて、一緒にcanvas Widgetを体験しましょう。

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        # Windowの初期設定を行う。
6        super().__init__(master)
7
8        # Windowの画面サイズを設定する。
9        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
10        self.master.geometry("300x200")
11
12        # Windowを親要素として、frame Widget(Frame)を作成する。
13        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
14        frame = tk.Frame(self.master)
15
16        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
17        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
18        frame.pack()
19
20        # frame Widget(Frame)を親要素として、canvas Widgetを作成する。
21        # width : 幅の設定
22        # height : 高さの設定
23        # background : 背景色の設定
24        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
25        canvas = tk.Canvas(frame, width=500, height=500, background="white")
26
27        # create_oval : 楕円を描く関数
28        # create_ovalについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
29        canvas.create_oval(200, 100, 10, 20, fill='black')
30
31        # frame Widget(Frame)を親要素とした場合に、canvas Widgetをどのように配置するのか?
32        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
33        canvas.pack()
34
35# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
36if __name__ == "__main__":
37    # Windowを生成する。
38    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
39    root = tk.Tk()
40    app = Application(master=root)
41    # Windowをループさせて、継続的にWindow表示させる。
42    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
43    app.mainloop()

上記のコードをPython環境で実行すると、「Tkinterの構成要素」で紹介した画像の結果が表示されます。

canvas Widgetを作成する

canvas Widgetは

1import tkinter as tk
2
3tk.Canvas(option1, option2, ...) or tk.Canvas('親要素', option1, option2, ...)

で作成できます。

canvas Widgetで使われるoptionの種類としては

• bg, background
• bd, borderwidth
• relief
• cursor
• height, width
• takefocus
• highlightcolor, highlightbackground, highlightthickness
• selectbackground, selectforeground
• selectborderwidth
• closeenough
• scrollbarに関連するoption

があります。順番に見ていきましょう。

※ optionの種類一覧を調べたい場合は、以下のようにコードを記述してご確認ください。

1import tkinter as tk
2
3# canvas Widgetを生成する。
4canvas = tk.Canvas()
5# canvas Widgetに関するoptionの種類一覧を取得する。
6print(canvas.keys())

bg, background

bg option, background optionを利用すると、canvas Widgetの背景色を設定できます。

bgとbackground両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

色に関しては、Tkinterの色の使い方とは?活用例から色の一覧をまとめて紹介!?で総括していますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="blue") or canvas.configure(width=500, height=500, background="blue")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6canvas = tk.Canvas(frame, width=500, height=500, background="blue")

以下の画像のようにcanvas Widgetを描画します。

bd, borderwidth

bd option, borderwidth optionを利用すると、canvas Widgetの枠の大きさを設定できます。

bdとborderwidth両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", bd=50) or canvas.configure(width=500, height=500, background="white", bd=50)
4##################################
5# bd option : canvas Widgetの枠の大きさを設定。デフォルト0。
6canvas = tk.Canvas(frame, width=500, height=500, background="white", bd=50)

以下の画像のようにcanvas Widgetを描画します。

relief

relief optionを利用すると、canvas Widgetの枠のデザインを設定できます。

指定方法としては、

• tk.RAISED
• tk.SUNKEN
• tk.FLAT
• tk.RIDGE
• tk.GROOVE
• tk.SOLID

の6種類があります。

例えば下準備コードを、以下のように変更すると、

1+    reliefList = [tk.RAISED, tk.SUNKEN, tk.FLAT, tk.RIDGE, tk.GROOVE, tk.SOLID]
2+    for relief in reliefList:
3-    canvas = tk.Canvas(frame, width=500, height=500, background="white")
4+        canvas = tk.Canvas(frame, width=50, height=50, background="white", bd=20, relief=relief)
5+        canvas.pack(side=tk.LEFT)
6
7-    canvas.create_oval(200, 100, 10, 20, fill='black')
8-    canvas.pack()

以下の画像のようにcanvas Widgetを描画します。

relief optionはそもそも枠がなければ、効果を発揮できません。relief optionの設定に合わせて、borderwidth or bd optionを1以上に設定して利用しましょう。

cursor

cursor optionを利用すると、canvas Widget内へマウスカーソルを移動すると、矢印の見た目を変化できます。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更して

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", cursor='clock') or canvas.configure(width=500, height=500, background="white", cursor='clock')
4##################################
5canvas = tk.Canvas(frame, width=500, height=500, background="white", cursor='clock')

canvas Widget内へマウスカーソルを移動すると、矢印の見た目が変更します。

height, width

height option, width optionを利用すると、それぞれcanvas Widgetの高さ・幅を設定できます。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=50, height=50, background="white") or canvas.configure(width=50, height=50, background="white")
4##################################
5canvas = tk.Canvas(frame, width=50, height=50, background="white")

以下の画像のようにcanvas Widgetを描画します。

takefocus

takefocus optionを利用すると、tabキーを押すことでcanvas Widgetへフォーカスをあてられます。

True(フォーカスをあてる), False(フォーカスを外す(デフォルト))で値を設定します。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更して、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", takefocus=True) or canvas.configure(width=500, height=500, background="white", takefocus=True)
4##################################
5canvas = tk.Canvas(frame, width=500, height=500, background="white", takefocus=True)

tabキーを押すとcanvas Widgetへフォーカスを当てられます。

highlightcolor, highlightbackground, highlightthickness

highlightcolor option, highlightbackground option, highlightthickness optionを利用すると、それぞれフォーカスがあてられた時の囲い線の色, フォーカスが外れた時の囲い線の色, 囲い線の太さを設定できます。

例えば下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", highlightthickness=20, highlightbackground="blue") or canvas.configure(width=500, height=500, background="white", highlightthickness=20, highlightbackground="blue")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6canvas = tk.Canvas(frame, width=500, height=500, background="white", highlightthickness=20, highlightbackground="blue")

以下の画像のようにcanvas Widgetを描画します。

また下準備コードのcanvas = tk.Canvas(frame, width=500, height=500, background="white")箇所を、以下のように変更して、

1# 別解法 ##########################
2# canvas = tk.Canvas(frame)
3# canvas.config(width=500, height=500, background="white", highlightthickness=20, highlightcolor="green", takefocus=True) or canvas.configure(width=500, height=500, background="white", highlightthickness=20, highlightcolor="green", takefocus=True)
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6canvas = tk.Canvas(frame, width=500, height=500, background="white", highlightthickness=20, highlightcolor="green", takefocus=True)

tabキーを押すと、以下の画像のようにcanvas Widgetを描画します。

selectbackground, selectforeground

selectbackground option, selectforeground optionを利用すると、それぞれ選択された文字列の背景色・文字列色を変更できます。

例えば下準備コードを、以下のように変更すると、

1- canvas = tk.Canvas(frame, width=500, height=500, background="white")
2+ canvas = tk.Canvas(frame, width=500, height=500, background="white", selectbackground='green', selectforeground='orange')
3
4- canvas.create_oval(200, 100, 10, 20, fill='black')
5+ # create_text : 文字列を描く関数
6+ # create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
7+ # tag option : 描画する文字列へ名前をつける。testとする。
8+ canvas.create_text(250, 250, text="テストテスト", tag='test', fill='black')
9
10+ # testと名付けられたcanvasの2~4文字目を選択状態に変更する。
11+ canvas.select_from("test", 2)
12+ canvas.select_to("test", 4)

以下の画像のようにcanvas Widgetを描画します。

selectborderwidth

selectborderwidth optionを利用すると、選択される文字列の外側へ作られる、枠の大きさを設定できます。

例えば下準備コードを、以下のように変更すると、

1- canvas = tk.Canvas(frame, width=500, height=500, background="white")
2+ canvas = tk.Canvas(frame, width=500, height=500, background="white", selectbackground='green', selectforeground='orange', selectborderwidth=20)
3
4- canvas.create_oval(200, 100, 10, 20, fill='black')
5+ # create_text : 文字列を描く関数
6+ # create_textについて : https://kuroro.blog/python/ANyM9WLpd0LSXRQAELOj/
7+ # tag option : 描画する文字列へ名前をつける。testとする。
8+ canvas.create_text(250, 250, text="テストテスト", tag='test', fill='black')
9
10+ # testと名付けられたcanvasの2~4文字目を選択状態に変更する。
11+ canvas.select_from("test", 2)
12+ canvas.select_to("test", 4)

以下の画像のようにcanvas Widgetを描画します。

closeenough

closeenough optionを利用すると、canvasで描いた図形や画像へマウスオーバーできる範囲を拡大できます。

closeenoughの値としては、1以上の小数を設定します。

scrollbarに関連するoption

scrollbarに関連するoption(scrollregion, xscrollcommand, xscrollincrement, yscrollcommand, yscrollincrement)に関しては、Tkinterで使われるscrollbarとは?活用事例を交えて徹底解説の「その他のWidgetを使った、scrollbar Widgetサンプル集」でまとめていますので、是非ご確認ください。

まとめ

• Tkinterで利用されるcanvas Widgetとは、Widgetの一種で様々な図形や画像を描画するものを意味します。
• 図形や画像として、直線(折線)、楕円、扇形、矩形、多角形、画像、文字列、Widgetを描画できる。

参考文献

• Tkinterで使われるcanvasを作成するサンプルコード
• 折線とは?
• 楕円とは?
• 扇形とは?
• 矩形とは?
• マウスカーソルとは?
• Tkinterで使われるマウスカーソルの種類
• フォーカスについて
• tabキーとは?
• マウスオーバーとは?