【Tkinter】canvas Widget内へ図形や画像を描画する
【Tkinter】canvas Widget内へ図形や画像を描画する

【Tkinter】canvas Widget内へ図形や画像を描画する

作成日 : 2021-05-22更新日 : 2021-11-04 62 min readPythonTkinter

【Tkinter】canvas Widget内へ図形や画像を描画する

今回はcanvas Widget内へ図形や画像を描画する方法を解説いたします。図形や画像を描画する方法がわからない、サンプルコードを交えてcanvas Widgetを学びたい方へおすすめです。ぜひ最後までご覧ください。

目次
  1. そもそもTkinterで利用されるcanvas Widgetとは?
    1. Tkinterの構成要素
  2. 下準備
  3. 【9種類】canvas Widget内へ図形や画像を描画するための関数
    1. create_line
    2. create_oval
    3. create_arc
    4. create_rectangle
    5. create_polygon
    6. create_image
    7. create_bitmap
    8. create_text
    9. create_window
  4. まとめ
  5. 参考文献
目次を開く⬇︎

執筆者 - おすすめの記事3選

この記事も読まれています

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

今回はTkinterで使われるcanvas Widgetの作成方法に関して、徹底解説いたします。canvas Widge...

この記事も読まれています

【Tkinter】canvas Widget内で描かれた、図形や画像を操作する

今回はTkinterで使われるcanvas Widget内で描かれた、図形や画像を操作する方法を解説致します。canva...

この記事も読まれています

【図解付き!?】Tkinterで使われるmainloopをわかりやすく解説

今回はTkinterで使われるmainloopを、図解を用いてわかりやすく解説いたします。なんとなくmainloopを使...

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

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

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

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

など多岐にわたります。

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

Tkinterの構成要素

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

名称説明文Window　画像の緑色枠の部分になります。Tkinter画面全体を表します。Frame画像内の紫色枠の部分になります。Widgetが1つ以上ある場合に、取りまとめるものです。Widget青色枠で囲まれる部分になります。1つの機能を持つ最小単位 = 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について : https://kuroro.blog/python/V63iINoXI8iwMeRMEJPK/ 26 canvas = tk.Canvas(frame, width=500, height=500, background="white") 27 28 # create_oval : 楕円を描く関数 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の構成要素」で紹介した画像の結果が表示されます。

【9種類】canvas Widget内へ図形や画像を描画するための関数

canvas Widget内へ図形や画像を描画するためには、用意される関数を利用する必要があります。

関数の種類としては、

  • create_line
  • create_oval
  • create_arc
  • create_rectangle
  • create_polygon
  • create_image
  • create_bitmap
  • create_text
  • create_window

の9種類存在します。順に見ていきましょう。

create_line

create_line関数を利用すると、直線(折線)を描画できます。

1# 戻り値 : 直線(折線)に紐づく独自ID 2.create_line(x1座標, y1座標, x2座標, y2座標, x3座標, y3座標..., option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x2座標, y2座標) -> (x3座標, y3座標) ...の点をつなぎ合わせて線を生成するイメージです。

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2+ # x1座標 : 200, y1座標 : 200, x2座標 : 10, y2座標 : 20, x3座標 : 60, y3座標 : 100, x4座標 : 40, y4座標 : 30 3+ # option : fill(線を引くときの色を設定) 4+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 5+ # 戻り値 : 直線(折線)に紐づく独自ID 6+ canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black')

以下の画像のように直線(折線)を作成します。

create_lineで使われるoptionの種類としては、以下のようになります。

option名説明文用例activefill 　　　　　　　　　　　　　　　　　　　　　　描画する線の上にマウスカーソルが移動した場合に、線の色を変更する。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activefill="pink")activedash描画する線の上にマウスカーソルを移動した場合に、破線へ変更する。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activedash=(10, 5))activewidth描画する線の上にマウスカーソルを移動した場合に、線の太さを変更する。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activewidth=20)arrow描画する線へ矢印をつけます。指定方法として、tk.NONE(デフォルト。矢印をつけない), tk.FIRST(最初の点(x1, y1)へ矢印をつける), tk.BOTH(最初の点(x1, y1)、最後の点(xn, yn)へ矢印をつける), tk.LAST(最後の点(xn, yn)へ矢印をつける)があります。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', arrow=tk.LAST)arrowshape矢印の先の形を整形します。値の設定の仕方や作られる仕組みを知りたい方はこちらをご確認ください。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', arrow=tk.LAST, arrowshape=(20, 30, 3))dash描画する線を破線にする。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', dash=(10, 5))dashoffset破線の開始位置を変更する。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', dash=(10, 5), dashoffset=8)state描画する線の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(描画する線を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, activefill="pink")disableddash描画する線の状態がtk.DISABLEDの場合に、線を破線にする。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disableddash=(10, 5))disabledfill描画する線の状態がtk.DISABLEDの場合に、線の色を変更する。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledfill='pink')disabledwidth描画する線の状態がtk.DISABLEDの場合に、線の太さを変更する。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledwidth=5)fill描画する線の色を変更する。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='pink')capstyle描画する線の端のデザインを設定する。設定方法としては、tk.BUTT(平坦にする。デフォルト), tk.ROUND(丸める)があります。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', width=20, capstyle=tk.ROUND)joinstyle描画する線と線の繋ぎ目のデザインを設定する。設定方法としては、tk.BEVEL(平坦にする), tk.MITER(尖らせる), tk.ROUND(丸める。デフォルト)があります。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', width=20, joinstyle=tk.BEVEL)smooth描画する線を曲線として扱うか設定できます。Trueの場合、曲線として扱い、Falseの場合、直線として扱います。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', smooth=True)splinestepssmooth=Trueの場合に働きます。曲線の滑らかさを設定できます。デフォルトの値は12で値を大きくすると、一段と滑らかになります。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', smooth=True, splinesteps=30)width描画する線の太さを設定します。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', width=5)tag描画した線に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', tag=('xxx', 'yyy'))

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2+ # x1座標 : 200, y1座標 : 200, x2座標 : 10, y2座標 : 20, x3座標 : 60, y3座標 : 100, x4座標 : 40, y4座標 : 30 3+ # <option> 4+ # fill : 描画する線の色を設定 5+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 6+ # dash : 描画する線を破線にする。10 : 破線の線の長さ, 5 : 破線の間の空白の長さ 7+ # dashoffset : 破線の開始位置を指定する。最初に描画される破線の線の長さが、2となる。 8+ # capstyle : 破線の端を丸みのデザインへ変更する。 9+ # width : 破線の太さを変更する。 10+ # 戻り値 : 直線(折線)に紐づく独自ID 11+ canvas.create_line(200, 200, 10, 20, 60, 100, 40, 30, fill='black', dash=(10, 5), dashoffset=8, capstyle=tk.ROUND, width=5)

以下の画像のように直線(折線)を作成します。

create_oval

create_oval関数を利用すると、楕円を描画できます。

1# 戻り値 : 楕円に紐づく独自ID 2.create_oval(x1座標, y1座標, x2座標, y2座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x1座標, y2座標) -> (x2座標, y2座標) -> (x2座標, y1座標)の4点を繋いだ矩形に、接する楕円を生成します。

例えば下準備で紹介したコードを実行すると、以下の画像のように楕円を作成します。

create_ovalで使われるoptionの種類としては、以下のようになります。

option名説明文用例activefill 　　　　　　　　　　　　　　　　　　　　　　　　　　楕円の上にマウスカーソルを移動した場合に背景色を変更する。canvas.create_oval(200, 100, 10, 20, fill='pink', activefill='red')activeoutline楕円の上にマウスカーソルを移動した場合に、楕円の円周の色を変更する。canvas.create_oval(200, 100, 10, 20, fill='pink', activeoutline='red')activedash楕円の上にマウスカーソルを移動した場合に、楕円の円周を破線へ変更する。canvas.create_oval(200, 100, 10, 20, fill='pink', activeoutline='red', activedash=(10, 5))activewidth楕円の上にマウスカーソルを移動した場合に、楕円の円周の太さを変更する。canvas.create_oval(200, 100, 10, 20, fill='pink', activeoutline='red', activewidth=5)outline楕円の円周の色を変更する。canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red')dash楕円の円周を破線にする。canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red', dash=(10, 5))dashoffset楕円の円周を破線とした場合に、破線開始位置を変更する。canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red', dash=(10, 5), dashoffset=8)width楕円の円周の太さを設定します。円周の太さをなくしたい場合は、0を指定します。canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red', width=5)state楕円の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(楕円を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。canvas.create_oval(200, 100, 10, 20, fill='pink', state=tk.DISABLED, activefill='red')fill楕円の背景色を変更する。canvas.create_oval(200, 100, 10, 20, fill='pink')disabledfill楕円の状態がtk.DISABLEDの場合に、楕円の背景色を変更する。canvas.create_oval(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledfill='red')disabledoutline楕円の状態がtk.DISABLEDの場合に、楕円の円周の色を変更する。canvas.create_oval(200, 100, 10, 20, fill='pink', outline='red', state=tk.DISABLED, disabledoutline='green')disableddash楕円の状態がtk.DISABLEDの場合に、楕円の円周を破線にする。canvas.create_oval(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='green', disableddash=(10, 5))disabledwidth楕円の状態がtk.DISABLEDの場合に、楕円の円周の太さを変更する。※筆者のMac OS環境では変化がありませんでした。canvas.create_oval(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='green', disabledwidth=10)tag描画した楕円に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_oval(200, 100, 10, 20, fill='pink', tag=('xxx', 'yyy'))

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20 4+ # <option> 5+ # fill : 楕円の背景色を設定 6+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 7+ # outline : 楕円の円周の色を変更する。 8+ # 戻り値 : 楕円に紐づく独自ID 9+ canvas.create_oval(200, 100, 10, 20, fill='pink', outline='green')

以下の画像のように楕円を作成します。

create_arc

create_arc関数を利用すると、円弧(扇形)を描画できます。

1# 戻り値 : 円弧(扇形)に紐づく独自ID 2.create_arc(x1座標, y1座標, x2座標, y2座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x1座標, y2座標) -> (x2座標, y2座標) -> (x2座標, y1座標)の4点を繋いだ矩形内で、接する楕円の一部分(円弧(扇形)を生成します。

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20 4+ # option : fill(円弧(扇形)の背景色を設定) 5+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 6+ # 戻り値 : 円弧(扇形)に紐づく独自ID 7+ canvas.create_arc(200, 100, 10, 20, fill='black')

以下の画像のように円弧(扇形)を作成します。

create_arcで使われるoptionの種類としては、以下のようになります。

option名説明文用例activefill 　　　　　　　　　　　　　　　　　　　　　　　　　　円弧(扇形)の上にマウスカーソルを移動した場合に背景色を変更する。canvas.create_arc(200, 100, 10, 20, fill='black', activefill='red')activeoutline円弧(扇形)の上にマウスカーソルを移動した場合に、円弧(扇形)の周囲の色を変更する。canvas.create_arc(200, 100, 10, 20, fill='pink', activeoutline='red')activedash円弧(扇形)の上にマウスカーソルを移動した場合に、円弧(扇形)の周囲を破線へ変更する。canvas.create_arc(200, 100, 10, 20, fill='pink', activeoutline='red', activedash=(10, 5))activewidth円弧(扇形)の上にマウスカーソルを移動した場合に、円弧(扇形)の周囲の太さを変更する。canvas.create_arc(200, 100, 10, 20, fill='pink', activeoutline='red', activewidth=5)outline円弧(扇形)の周囲の色を変更する。canvas.create_arc(200, 100, 10, 20, fill='pink', outline='red')dash円弧(扇形)の周囲を破線にする。canvas.create_arc(200, 100, 10, 20, fill='pink', outline='red', dash=(10, 5))dashoffset円弧(扇形)の周囲を破線とした場合に、破線開始位置を変更する。canvas.create_arc(200, 100, 10, 20, fill='pink', outline='red', dash=(10, 5), dashoffset=8)width円弧(扇形)の周囲の太さを設定します。周囲の太さをなくしたい場合は、0を指定します。canvas.create_arc(200, 100, 10, 20, fill='pink', outline='red', width=5)state円弧(扇形)の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(円弧(扇形)を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, activefill='red')fill円弧(扇形)の背景色を変更する。canvas.create_arc(200, 100, 10, 20, fill='pink')disabledfill円弧(扇形)の状態がtk.DISABLEDの場合に、円弧(扇形)の背景色を変更する。canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledfill='red')disabledoutline円弧(扇形)の状態がtk.DISABLEDの場合に、円弧(扇形)の周囲の色を変更する。canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='red')disableddash円弧(扇形)の状態がtk.DISABLEDの場合に、円弧(扇形)の周囲を破線にする。canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='red', disableddash=(10, 5))disabledwidth円弧(扇形)の状態がtk.DISABLEDの場合に、円弧(扇形)の周囲の太さを変更する。canvas.create_arc(200, 100, 10, 20, fill='pink', state=tk.DISABLED, disabledoutline='red', disabledwidth=5)tag描画した円弧(扇形)に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_arc(200, 100, 10, 20, fill='pink', tag=('xxx', 'yyy'))start楕円のどの角度から円弧(扇形)として描画するのか設定します。デフォルトは0(度)になります。canvas.create_arc(200, 100, 10, 20, fill='pink', start=30)extent角度を指定して、円弧(扇形)の大きさを設定します。デフォルトは90(度)になります。canvas.create_arc(200, 100, 10, 20, fill='pink', start=30, extent=120)style描画する図形の種類を選びます。種類としては、tk.PIESLICE(扇形。デフォルト。), tk.CHORD(弦), tk.ARC(円弧)になります。canvas.create_arc(200, 100, 10, 20, fill='pink', outline='green', style=tk.ARC)

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20 4+ # <option> 5+ # fill : 円弧(扇形)の背景色を設定 6+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 7+ # start : 楕円のどの角度から円弧(扇形)として描画するのか設定 8+ # extent : 角度を指定して、円弧(扇形)の大きさを設定 9+ # style : 描画する図形の種類を設定する。 10+ # 戻り値 : 円弧(扇形)に紐づく独自ID 11+ canvas.create_arc(200, 100, 10, 20, fill='pink', start=30, extent=60, style=tk.CHORD)

以下の画像のように円弧(扇形)を作成します。

create_rectangle

create_rectangle関数を利用すると、矩形を描画できます。

1# 戻り値 : 矩形に紐づく独自ID 2.create_rectangle(x1座標, y1座標, x2座標, y2座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x1座標, y2座標) -> (x2座標, y2座標) -> (x2座標, y1座標)の4点を繋いだ矩形を生成します。

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # x1座標 : 200, y1座標 : 100, x2座標 : 10, y2座標 : 20 4+ # option : fill(矩形の背景色を設定) 5+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 6+ # 戻り値 : 矩形に紐づく独自ID 7+ canvas.create_rectangle(200, 100, 10, 20, fill='black')

以下の画像のように矩形を作成します。

create_rectangleで使われるoptionの種類としては、以下のようになります。

option名説明文用例activefill 　　　　　　　　　　　　　　　　　　　　　　　　　　矩形の上にマウスカーソルを移動した場合に背景色を変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black', activefill='red')activeoutline矩形の上にマウスカーソルを移動した場合に、矩形の周囲の色を変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black', activeoutline='red')activedash矩形の上にマウスカーソルを移動した場合に、矩形の周囲を破線へ変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black', activeoutline='red', activedash=(10, 5))activewidth矩形の上にマウスカーソルを移動した場合に、矩形の周囲の太さを変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black', activeoutline='red', activewidth=5)outline矩形の周囲の色を変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black', outline='red')dash矩形の周囲を破線にする。canvas.create_rectangle(200, 100, 10, 20, fill='black', outline='red', dash=(10, 5))dashoffset矩形の周囲を破線とした場合に、破線開始位置を変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black', outline='red', dash=(10, 5), dashoffset=12)width矩形の周囲の太さを設定します。周囲の太さをなくしたい場合は、0を指定します。canvas.create_rectangle(200, 100, 10, 20, fill='black', outline='red', width=5)state矩形の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(矩形を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, activefill='red')fill矩形の背景色を変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black')disabledfill矩形の状態がtk.DISABLEDの場合に、矩形の背景色を変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, disabledfill='red')disabledoutline矩形の状態がtk.DISABLEDの場合に、矩形の周囲の色を変更する。canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, disabledoutline='red')disableddash矩形の状態がtk.DISABLEDの場合に、矩形の周囲を破線にする。canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, disabledoutline='red', disableddash=(10, 5))disabledwidth矩形の状態がtk.DISABLEDの場合に、矩形の周囲の太さを変更する。※筆者のMac OS環境では変化がありませんでした。canvas.create_rectangle(200, 100, 10, 20, fill='black', state=tk.DISABLED, disabledoutline='red', disabledwidth=5)tag描画した矩形に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_rectangle(200, 100, 10, 20, fill='black', tag=('xxx', 'yyy'))create_polygon

create_polygon関数を利用すると、多角形を描画できます。

1# 戻り値 : 多角形に紐づく独自ID 2.create_polygon(x1座標, y1座標, x2座標, y2座標, x3座標, y3座標..., option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

(x1座標, y1座標) -> (x2座標, y2座標) -> (x3座標, y3座標)...(x1座標, y1座標)の点を繋いだ形を生成します。

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # x1座標 : 200, y1座標 : 200, x2座標 : 10, y2座標 : 20, x3座標 : 60, y3座標 : 100, x4座標 : 40, y4座標 : 30 4+ # option : fill(多角形の背景色を設定) 5+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 6+ # 戻り値 : 多角形に紐づく独自ID 7+ canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black')

以下の画像のように多角形を作成します。

create_polygonで使われるoptionの種類としては、以下のようになります。

option名説明文用例activefill 　　　　　　　　　　　　　　　　　　　　　　　　　　多角形の上にマウスカーソルを移動した場合に背景色を変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activefill='red')activeoutline多角形の上にマウスカーソルを移動した場合に、多角形の周囲の色を変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activeoutline='red')activedash多角形の上にマウスカーソルを移動した場合に、多角形の周囲を破線へ変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activeoutline='red', activedash=(10, 5))activewidth多角形の上にマウスカーソルを移動した場合に、多角形の周囲の太さを変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', activeoutline='red', activewidth=5)outline多角形の周囲の色を変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', outline='red')dash多角形の周囲を破線にする。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', outline='red', dash=(10, 5))dashoffset多角形の周囲を破線とした場合に、破線開始位置を変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', outline='red', dash=(10, 5), dashoffset=8)width多角形の周囲の太さを設定します。周囲の太さをなくしたい場合は、0を指定します。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', outline='red', width=5)state多角形の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(多角形を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, activefill='red')fill多角形の背景色を変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black')disabledfill多角形の状態がtk.DISABLEDの場合に、多角形の背景色を変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledfill='red')disabledoutline多角形の状態がtk.DISABLEDの場合に、多角形の周囲の色を変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledoutline='red')disableddash多角形の状態がtk.DISABLEDの場合に、多角形の周囲を破線にする。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledoutline='red', disableddash=(10, 5))disabledwidth多角形の状態がtk.DISABLEDの場合に、多角形の周囲の太さを変更する。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', state=tk.DISABLED, disabledoutline='red', disabledwidth=5)tag描画した多角形に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', tag=('xxx', 'yyy'))joinstyle線と線の繋ぎ目のデザインを設定します。設定方法としては、tk.BEVEL(平坦にする), tk.MITER(尖らせる), tk.ROUND(丸める。デフォルト)があります。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', joinstyle=tk.BEVEL)smooth多角形を形作る線を曲線として扱うか設定できます。Trueの場合、曲線として扱い、Falseの場合、直線として扱います。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', smooth=True)splinestepssmooth=Trueの場合に働きます。曲線の滑らかさを設定できます。デフォルトの値は12で値を大きくすると、一段と滑らかになります。canvas.create_polygon(200, 200, 10, 20, 60, 100, 40, 30, fill='black', smooth=True, splinesteps=100)create_image

create_image関数を利用すると、画像を描画できます。

1# 戻り値 : 画像に紐づく独自ID 2.create_image(x座標, y座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

デフォルトとして(x座標, y座標)を画像の中心として生成します。

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # 画像を読み込む。 4+ # .png拡張子以外の画像を扱う場合は、PILライブラリを活用する。 5+ # 画像について : https://kuroro.blog/python/Z7k1LSyDyiDHtD5UCjmG/ 6+ canvas.photo = tk.PhotoImage(file="/path_to/xxx.png") 7+ # 第一引数 x座標 : 200 8+ # 第二引数 y座標 : 200 9+ # <option> 10+ # image : 表示するimage情報 11+ # 戻り値 : 画像に紐づく独自ID 12+ canvas.create_image(200, 200, image=canvas.photo)

以下の画像のように画像を作成します。

画像の取り扱いに関しては、【もう間違えない!?】PythonのTkinterを用いて画像を表示する方法でまとめましたので、うまく表示されない、サンプルコードを確認したい方はご確認ください。

この記事も読まれています

【もう間違えない!?】PythonのTkinterを用いて画像を表示する方法

今回はPythonのTkinterを活用して、画像を表示する方法を解説いたします。画像を表示したいが上手くいかない、画像...

create_imageで使われるoptionの種類としては、以下のようになります。

option名説明文用例activeimage 　　　　　　　　　　　　　　　　　　　　　　　　　　表示される画像へマウスカーソルを移動した時に、用意していたactiveimageの画像を表示する。canvas.create_image(200, 200, image=canvas.photo, activeimage=image)anchor(x座標, y座標)と画像のどの位置を対応させて、画像を表示するのか設定する。指定方法として、tk.W(画像左の真ん中), tk.N(画像上の真ん中), tk.S(画像下の真ん中), tk.E(画像右の真ん中), tk.NE(画像右上), tk.NW(画像左上), tk.SW(画像左下), tk.SE(画像右下), tk.CENTER(画像の中心、デフォルト)が存在する。canvas.create_image(200, 200, image=canvas.photo, anchor=tk.E)state画像の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(画像を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。canvas.create_image(200, 200, disabledimage=canvas.photo, state=tk.DISABLED)disabledimage画像の状態がtk.DISABLEDの場合に、disabledimageへ設定した画像を表示します。canvas.create_image(200, 200, disabledimage=canvas.photo, state=tk.DISABLED)tag描画した画像に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_image(200, 200, image=canvas.photo, tag=('xxx', 'yyy'))image表示する画像情報を設定canvas.create_image(200, 200, image=canvas.photo)create_bitmap

create_bitmap関数を利用すると、bitmap画像を描画できます。

1# 戻り値 : bitmap画像に紐づく独自ID 2.create_bitmap(x座標, y座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

デフォルトとして(x座標, y座標)をbitmap画像の中心として生成します。

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # 第一引数 x座標 :50 4+ # 第二引数 y座標 : 50 5+ # <option> 6+ # bitmap : 表示するbitmap画像情報 7+ # background : 背景色 8+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 9+ # 戻り値 : bitmap画像に紐づく独自ID 10+ canvas.create_bitmap(50, 50, bitmap="error", background='black')

以下の画像のようにbitmap画像を描画できます。

create_bitmapで使われるoptionの種類としては、以下のようになります。

option名説明文用例activebackground 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　表示されるbitmap画像へマウスカーソルを移動した時に、背景色を変更する。canvas.create_bitmap(50, 50, bitmap="error", background='black', activebackground='red')activeforeground表示されるbitmap画像へマウスカーソルを移動した時に、bitmap画像の色を変更する。canvas.create_bitmap(50, 50, bitmap="error", background='black', activeforeground='red')activebitmap表示されるbitmap画像へマウスカーソルを移動した時に、activebitmap optionのbitmap画像を表示する。canvas.create_bitmap(50, 50, bitmap="error", background='black', activebitmap='info')anchor(x座標, y座標)とbitmap画像のどの位置を対応させて、bitmap画像を表示するのか設定する。指定方法として、tk.W(bitmap画像左の真ん中), tk.N(bitmap画像上の真ん中), tk.S(bitmap画像下の真ん中), tk.E(bitmap画像右の真ん中), tk.NE(bitmap画像右上), tk.NW(bitmap画像左上), tk.SW(bitmap画像左下), tk.SE(bitmap画像右下), tk.CENTER(bitmap画像の中心、デフォルト)が存在する。canvas.create_bitmap(50, 50, bitmap="error", background='black', anchor=tk.W)statebitmap画像の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(bitmap画像を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。canvas.create_bitmap(50, 50, bitmap="error", background='black', state=tk.DISABLED, activebackground='red')tag描画したbitmap画像に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_bitmap(50, 50, bitmap="error", background='black', tag=('xxx', 'yyy'))background表示されるbitmap画像の背景色を変更する。canvas.create_bitmap(50, 50, bitmap="error", background='black')foreground表示されるbitmap画像の色を変更する。canvas.create_bitmap(50, 50, bitmap="error", foreground='red')bitmap表示したいbitmap画像を設定する。bitmap画像の種類を知りたい場合は、こちらのリンクを確認ください。canvas.create_bitmap(50, 50, bitmap="error", foreground='red')disabledbackgroundbitmap画像の状態がtk.DISABLEDの場合に、背景色を変更します。canvas.create_bitmap(50, 50, bitmap="error", state=tk.DISABLED, disabledbackground='red')disabledforegroundbitmap画像の状態がtk.DISABLEDの場合に、bitmap画像の色を変更します。canvas.create_bitmap(50, 50, bitmap="error", state=tk.DISABLED, disabledforeground='red')disabledbitmapbitmap画像の状態がtk.DISABLEDの場合に、disabledbitmapへ設定するbitmap画像へ変更する。canvas.create_bitmap(50, 50, bitmap="error", state=tk.DISABLED, disabledforeground='red', disabledbitmap="info")create_text

create_text関数を利用すると、文字列を描画できます。

1# 戻り値 : 文字列に紐づく独自ID 2.create_text(x座標, y座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

デフォルトとして(x座標, y座標)を文字列の中心として生成します。

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # 第一引数 x座標 : 50 4+ # 第二引数 y座標 : 50 5+ # <option> 6+ # text : 文字列 7+ # fill : 文字列色 8+ # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/ 9+ # 戻り値 : 文字列に紐づく独自ID 10+ canvas.create_text(50, 50, text="テストテスト", fill='black')

以下の画像のように文字列を作成します。

create_textで使われるoptionの種類としては、以下のようになります。

option名説明文用例activefill 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　文字列へマウスカーソルを移動した時に、文字列色を変更する。canvas.create_text(50, 50, text="テストテスト", fill='black', activefill='red')anchor(x座標, y座標)と文字列のどの位置を対応させて、文字列を表示するのか設定する。指定方法として、tk.W(文字列左の真ん中), tk.N(文字列上の真ん中), tk.S(文字列下の真ん中), tk.E(文字列右の真ん中), tk.NE(文字列右上), tk.NW(文字列左上), tk.SW(文字列左下), tk.SE(文字列右下), tk.CENTER(文字列の中心、デフォルト)が存在する。canvas.create_text(50, 50, text="テストテスト", fill='black', anchor=tk.E)text文字列を設定する。canvas.create_text(50, 50, text="テストテスト", fill='black')fill文字列色を設定する。canvas.create_text(50, 50, text="テストテスト", fill='red')tag描画した文字列に対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_text(50, 50, text="テストテスト", fill='red', tag=('xxx', 'yyy'))state文字列の状態を設定する。設定できる値としては、tk.DISABLED(activexxx optionを利用不可にして、disabledxxx optionを利用可能にする), tk.HIDDEN(文字列を表示しない), tk.NORMAL(デフォルト、activexxx optionを利用可能にして、disabledxxx optionを利用不可にする)になります。canvas.create_text(50, 50, text="テストテスト", fill='black', state=tk.DISABLED, activefill='red')disabledfill文字列の状態がtk.DISABLEDの場合に、文字列色を変更する。canvas.create_text(50, 50, text="テストテスト", fill='black', state=tk.DISABLED, disabledfill='red')width文字列の折り返し幅を設定する。canvas.create_text(50, 50, text="テストテスト", width=50, fill='black')justify文字列の揃え方を設定する。設定の種類として、tk.LEFT(左寄せ、デフォルト), tk.CENTER(中央寄せ), tk.RIGHT(右寄せ)が存在する。canvas.create_text(50, 50, text="テストテスト", fill='black', width=50, justify=tk.RIGHT)font文字列の形式や大きさを変更できます。fontに関しては、Tkinterで使われるフォントって?2種類のフォントの設定方法を丁寧に解説でまとめております。canvas.create_text(50, 50, text="テストテスト", fill='black', font=("", 0, "underline"))create_window

create_window関数を利用すると、Widgetを描画できます。

1# 戻り値 : Widgetに紐づく独自ID 2.create_window(x座標, y座標, option1, option2, ...)

で定義されます。戻り値として独自IDが返されます。独自IDは図形や画像を操作するために利用します。

デフォルトとして(x座標, y座標)をWidgetの中心として生成します。

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

1- canvas.create_oval(200, 100, 10, 20, fill='black') 2 3+ # 第一引数 : x座標 : 250 4+ # 第二引数 : y座標 : 250 5+ # 第三引数以降 : option 6+ # window : 表示したいWidgetを設定。今回はlabel Widgetを設定する。 7+ # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/ 8+ # 戻り値 : Widgetに紐づく独自ID 9+ canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25))

以下の画像のようにWidgetを作成します。

label Widgetに関しては、【初学者必見!?】Tkinterで使われるlabelの活用方法を徹底解説でまとめておりますので、是非ご確認ください。

この記事も読まれています

【初学者必見!?】Tkinterで使われるlabelの活用方法を徹底解説

今回はTkinterで使われるlabelの活用方法を徹底解説いたします。Tkinterを初めて学ぶ、labelに関して理...

create_windowで使われるoptionの種類としては、以下のようになります。

option名説明文用例anchor　　　　　 　　　　　　　　　　　　　　　(x座標, y座標)とWidgetのどの位置を対応させて、Widgetを表示するのか設定する。指定方法として、tk.W(Widget左の真ん中), tk.N(Widget上の真ん中), tk.S(Widget下の真ん中), tk.E(Widget右の真ん中), tk.NE(Widget右上), tk.NW(Widget左上), tk.SW(Widget左下), tk.SE(Widget右下), tk.CENTER(Widgetの中心、デフォルト)が存在する。canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25), anchor=tk.E)tag描画したWidgetに対して、タグをつけます。タグをつけることで図形や画像の削除などの操作を容易にします。タグを単数つける場合は、tag='xxx', タグを複数つける場合は、tag=('xxx', 'yyy')とします。canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25), tag=('xxx', 'yyy'))stateWidgetの状態を設定する。設定できる値としては、tk.DISABLED, tk.HIDDEN(Widgetを表示しない), tk.NORMAL(デフォルト)になります。canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25), state=tk.DISABLED)height, widthそれぞれWidgetの高さ・幅を設定できます。canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25), height=100, width=50)window表示したいWidgetを設定します。canvas.create_window(250, 250, window=tk.Label(text='testtest', height=5, width=25))

まとめ

  • Tkinterの構成要素として、Window, Frame, Widgetの概念が存在する。
  • Tkinterで利用されるcanvas Widgetとは、Widgetの一種で様々な図形や画像を描画するものを意味します。

この記事も読まれています

【サンプルコード付】Tkinterで使われるmessageboxの活用法を解説

今回はTkinterで使われるmessageboxの活用法を、サンプルコードを用いて解説いたします。messagebox...

この記事も読まれています

Tkinterで使われるWidgetの一覧をまとめてみました!?

今回はTkinterで使われるWidgetの一覧をまとめてみました。Widgetに関して理解を深めたい、 Tkinter...

この記事も読まれています

Tkinterで使われるgeometryとは?コードを通して活用方法を徹底解説

今回はTkinterで使われるgeometryに関して、コードを通して活用方法を徹底解説いたします。なんとなくgeome...

この記事も読まれています

【コード付】Tkinterで使われるbindとは?bindの仕組みを交えて解説

今回はTkinterで使われるbindに関して、bindの仕組みを交えて徹底解説いたします。なんとなくbindを使ってい...

この記事も読まれています

Tkinterで使われるafterとは?活用方法から注意点まで徹底解説!?

今回はTkinterで使われるafterに関して、活用方法から注意点まで徹底解説いたします。afterを使ってみたい、a...

参考文献

  • Tkinterのcanvasへ図形や画像を描画するサンプルコード
  • 折線とは?
  • 楕円とは?
  • 扇形とは?
  • 矩形とは?
  • マウスカーソルとは?
  • タグとは?
  • 弦とは?
  • bitmap画像とは?
  • bitmap画像の種類
  • 文字列の折り返しとは?
記事に関するお問い合わせ
📎📎📎📎📎📎📎📎📎📎
BOT