PythonでGUIアプリを作成できるモジュールtkinter（ティーキンター）のCanvasの使い方について解説します。
サンプルコードはモジュールのインポートを from tkinter import * としています。
関数を呼び出す際にパッケージ名の接頭辞 （tk.Frame() のtk.）を省略できるのでおすすめです。
Canvasとは
Canvasはtkinterの画面に図形を描画することができるWidget（ウィジェット）です。
描画できる図形は以下になります。
・長方形
・多角形
・楕円
・円弧
・線
・テキスト
・画像
・ビットマップ（標準組み込み画像）
Canvasで図形を描画する
図形を描画するには、まず画面にCanvasを配置して、その中に各図形に応じたメソッドを使用することで描画することができます。
Canvasには図形だけではなく、画像やテキストを表示することも可能です。
| 図形 | メソッド |
|---|---|
| 長方形 | create_rectangle |
| 楕円 | create_oval |
| 線 | create_line |
| 多角形 | create_polygon |
| 円弧 | create_arc |
| 画像 | create_image |
| テキスト | create_text |
| ビットマップ | create_bitmap |
試しに図形を描画してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | from tkinter import * # メインウィンドウを作成する root = Tk() root.title('Canvasの使い方') root.geometry('300x200') # メインウィンドウにキャンバスを作成・配置する canvas = Canvas(root, width=200, height=200, bg='white') canvas.pack() # キャンバスに図形を描画する canvas.create_rectangle(10, 10, 50, 50, fill='skyblue') canvas.create_oval(60, 10, 120, 50, fill='skyblue') canvas.create_line(130, 30, 200, 50) canvas.create_polygon(10, 100, 50, 70, 90, 100, fill='skyblue', outline="black") canvas.create_arc(100, 70, 200, 170, start=60, extent=90, fill='skyblue') img = PhotoImage(file='python_logo.png') canvas.create_image(50, 150, image=img) canvas.create_text(150, 150, text='Canvasの使い方') canvas.create_bitmap(100, 190, bitmap='error') root.mainloop() |
ビットマップは標準で組み込まれた画像を表示することができます。
OSによって違いがありますがWindowsでは以下の図が表示できます。
図は左から “error”, “gray75”, “gray50”, “gray25”, “gray12”, “hourglass”, “info”, “questhead”, “question”, “warning” になります。
Canvasのオプション一覧
Canvasで指定可能なオプション一覧です。
| オプション | 説明 | 値の形式 |
|---|---|---|
| width | Canvasの幅 | ピクセル値 |
| height | Canvasの高さ | ピクセル値 |
| bg (background) | 背景色 | 色名または16進数カラーコード |
| relief | 枠線タイプ （デフォルト値はflat） | flat, solid, groove, raised, ridge, sunken |
| bd (borderwidth) | 枠線の幅 relief とセットで設定 | ピクセル値 |
| cursor | マウスオーバー時のカーソルタイプ | カーソルタイプ |
| scrollregion | キャンバスをスクロールできる領域の大きさを定義 | タプル（左, 上, 右, 下） |
| xscrollcommand | 横方向スクロールバーのスクロールバー.set を指定 | |
| yscrollcommand | 縦方向スクロールバーのスクロールバー.set を指定 | |
| xscrollincrement | 横方向のスクロールバーの矢印をクリックしたときの移動量 | |
| yscrollincrement | 縦方向のスクロールバーの矢印をクリックしたときの移動量を指定 | |
| takefocus | タブキーでCanvasにフォーカスするか指定 （デフォルトはFalse） | True, False |
| highlightcolor | フォーカス時の枠線の色 | 色名または16進数カラーコード |
| highlightbackground | フォーカスされていない時の線の色 | 色名または16進数カラーコード |
| highlightthickness | フォーカス時、フォーカスされていない時の枠線の太さ | ピクセル値 |
| selectbackground | 選択範囲に使用する背景色 | 色名または16進数カラーコード |
| selectforeground | 選択範囲に使用する前景色 | 色名または16進数カラーコード |
| selectborderwidth | 選択範囲の周りに使用する境界線の幅 | ピクセル値 |
幅・高さ（width, height）
Canvasの幅と高さはwidth, heightで指定します。
この例では分かりやすくするために背景色を設定しています。
1 2 3 4 5 6 7 8 9 10 11 | from tkinter import * root = Tk() root.title('Canvasの使い方') root.geometry('300x200') # キャンバスを作成・配置する canvas = Canvas(root, width=200, height=200, bg='white') canvas.pack() root.mainloop() |
背景色（bg）
背景色を設定するには、bg（background）を指定します。
値は色名か16進数カラーコードを指定します。
・参考サイト：色の名前とカラーコードが一目でわかるWEB色見本 原色大辞典
1 | canvas = Canvas(root, width=200, height=200, bg='white') |
枠線（relief, bd）
reliefで枠線を設定します。
線の太さを変更したい場合はbdを指定します。デフォルトは2pxです。
1 2 3 4 5 6 | canvas1 = Canvas(root, width=200, height=50, relief='flat', bd=4) canvas2 = Canvas(root, width=200, height=50, relief='solid', bd=4) canvas3 = Canvas(root, width=200, height=50, relief='groove', bd=4) canvas4 = Canvas(root, width=200, height=50, relief='raised', bd=4) canvas5 = Canvas(root, width=200, height=50, relief='ridge', bd=4) canvas6 = Canvas(root, width=200, height=50, relief='sunken', bd=4) |
カーソル（cursor）
cursorを指定するとマウスオーバーした時のカーソルタイプを変更できます。
1 | canvas1 = Canvas(root, width=200, height=200, bg='white', cursor='hand2') |
カーソルのタイプは全部で75個ありますが、実際に使えそうなものは限られています。
以下がサンプルになります。全タイプを確認したい場合はこちらのサイトで確認できます。
| アイコン | タイプ |
|---|---|
 | arrow |
 | center_ptr |
 | circle |
 | crosshair |
 | draft_large |
 | draft_small |
 | left_ptr |
 | hand1 |
 | hand2 |
 | tcross |
 | top_left_arrow |
 | X_cursor |
スクロール設定（scrollregion, scrollcommand）
スクロール設定を行うことで、キャンバスをスクロールさせて表示領域を変化させることができます。
スクロールを設定するには何段階かステップを踏む必要があります。
1. Scrollbarウィジェットを作成
2. Canvasにスクロール範囲を設定（scrollregion）
3. ScrollbarウィジェットをCanvasに紐づけ（xscrollcommand, yscrollcommand）
4. ScrollbarをCanvasの側に配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | from tkinter import * # メインウィンドウを作成する root = Tk() root.title('Buttonの使い方') root.geometry('300x250') # スクロールバーオブジェクト生成 xbar = Scrollbar(root, orient=HORIZONTAL) ybar = Scrollbar(root, orient=VERTICAL) # メインウィンドウにキャンバスを作成・スクロールバーを紐付け canvas = Canvas(root, width=280, height=200, scrollregion=(-50, -50, 500, 500), xscrollcommand=xbar.set, yscrollcommand=ybar.set) # キャンバスとスクロールバーを配置 canvas.grid(row=0, column=0) xbar.grid(row=1, column=0, sticky=W+E) ybar.grid(row=0, column=1, sticky=N+S) # スクロールバーのスライダーが動かされた時に実行する処理を設定 xbar['command'] = canvas.xview ybar['command'] = canvas.yview # 図形を描画 canvas.create_rectangle(10, 10, 300, 100, fill="pink", tag="rectangle") canvas.create_oval(10, 100, 100, 300, fill="skyblue", tag="oval") root.mainloop() |
スクロールバー矢印クリック時の移動量（scrollincrement）
スクロールバーの矢印をクリックした時の移動量を設定することができます。
下の左側がデフォルト時、右側がxscrollincrement, yscrollincrementを「2」に設定した時の動作です。移動量が変更されています。
1 2 3 4 5 6 | canvas = Canvas(root, width=280, height=200, scrollregion=(-50, -50, 500, 500), xscrollcommand=xbar.set, yscrollcommand=ybar.set, xscrollincrement=2, yscrollincrement=2) |
フォーカス設定
また、フォーカス時とフォーカスしていない時の線の色と太さを設定することができます。
フォーカス時の線の色：highlightcolor
フォーカスしていない時の線の色： highlightbackground
枠線の太さ：highlightthickness
1 2 3 4 5 | canvas = Canvas(root, width=200, height=200, takefocus=True, highlightcolor='red', highlightbackground='grey', highlightthickness=2) |
選択範囲の設定
Canvasに描画したテキストは特定の範囲を選択して選択範囲を装飾することができます。
装飾は背景色、文字色、枠線の太さを設定できます。
背景色：selectbackground
文字色：selectforeground
枠線の太さ：selectborderwidth
設定を適用するには、Canvasの設定と合わせてテキストの選択範囲をcanvas.select_from(タグ名, 開始位置)と canvas.select_to(タグ名, 終了位置)で指定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | from tkinter import * # 1. メインウィンドウを作成する root = Tk() root.title('Canvasの使い方') root.geometry('300x100') # 2. メインウィンドウにキャンバスを作成・配置する canvas = Canvas(root, width=200, height=200, selectbackground='pink', selectforeground='white', selectborderwidth=2) canvas.pack() canvas.create_text(100, 40, font=('',20), text='Canvasの使い方', tag='text') # テキストの選択範囲を指定 canvas.select_from('text', 0) canvas.select_to('text', 5) root.mainloop() |
以上でCanvasの使い方の解説は終了です。
以下の記事も参考にしてみて下さい。
・関連記事：PythonでGUIアプリを作成する（tkinter）
・関連記事：【Python/tkinter】Label（ラベル）の使い方
・関連記事：【Python/tkinter】Button（ボタン）の使い方
・関連記事：【Python/tkinter】Entry（エントリー）の使い方