ウィンドウの中に円を描くよ!Canvasの使い方と図形の描きかたを覚えよう!

ウィンドウの中に円を描くよ!Canvasの使い方と図形の描きかたを覚えよう!

図形の描き方を覚えよう!

ここからは、ウィンドウの中に円を描いて動かしたりするプログラムを書いていくよ。図形の描画や「クラスとオブジェクト」の考え方がわかるようになるよ!

キャンバスに円を描こう!

それじゃあ早速書いていこう。円を描くのもtkinterで出来るんだ!先にプログラムをまとめて書いちゃうね。

# codeing=utf-8
import tkinter as tk

#ウィンドウを作る
root = tk.Tk()
root.geometry("600x400")

#Canvasを作る
canvas = tk.Canvas(root, width=600, height=400, bg="white")
canvas.place(x=0, y=0)

#円を描く
canvas.create_oval(300-20, 200-20, 300+20, 200+20)


root.mainloop()

▽ 実行結果

解説

1〜6行目は、今までもやった内容だね。「tk」という名前でtkinterをインポートしてる。そしてウィンドウを「root」という名前で作ってるんだね。

# codeing=utf-8
import tkinter as tk
 
#ウィンドウを作る
root = tk.Tk()
root.geometry("600x400")

そして円を描いているのは、8〜13行目の部分。

#Canvasを作る
canvas = tk.Canvas(root, width=600, height=400, bg="white")
canvas.place(x=0, y=0)
 
#円を描く
canvas.create_oval(300-20, 200-20, 300+20, 200+20)

覚えておきたいのは、図形を描くときはいきなり描くんじゃなくて「描くための土台」を作らないといけないんだ。その土台のことを「キャンバス(canvas)」と言うよ。キャンバスはtkinterの「Canvas()」を使う。それが9行目だね。

canvas = tk.Canvas(root, width=600, height=400, bg="white")

「canvas」という変数を作ってそこに代入する形でキャンバスを作ってる。ここは好きな名前をつけて大丈夫だよ。CanVas()の引数の書き方はこんな感じだ。

Canvas(①キャンバスをくっつけるもの, ②横, ③高さ, ④背景の色)

今回は①はウィンドウだから「root」、②③は600×400pxにしてる。つまりウィンドウとまったく同じ大きさでぴったり重なるってことだね。④の背景は白にしてるよ。

10行目では、キャンバスの設定ができたからplace()を使って実際に置くって命令を書いてる。これは他のパーツを作るときと一緒だね。

canvas.place(x=0, y=0)

キャンバスを作って置いたら、そこに「円を描く」って命令を書く。それが12,13行目だね。

#円を描く
canvas.create_oval(300-20, 200-20, 300+20, 200+20)

円を描くには「create_oval()」を使う。使い方はこんな感じだ。

キャンバス名.create_oval(左端のX座標, 上端のY座標, 右端のX座標, 下端のY座標)

今回はキャンバスの中心が、X:300/Y:200だから、そこを中心に半径20pxの円を書いてる。だから(300-20, 200-20, 300+20, 200+20)って書き方になってるんだね。もちろん…

#円を描く
canvas.create_oval(280, 180, 320, 220)

…って感じで計算後の数値を書いても同じ表示になるよ。今回は「キャンバスの中心に半径20cm」っていうのがわかりやすくなるために計算式で書いてるんだ。

円の色や線を変えてみよう

さっき描いたのは、黒い線のついた白い円だったね。でも円の色や線はカスタマイズすることも出来るんだ。描きかたはこんな感じ。

canvas.create_oval(280, 180, 320, 220, fill="red", outline="blue", width="6")

それぞれの設定の意味はこんな感じ。

fill:円の色
outline:線の色
width:線の太さ

実行してみると下のような円が描けるよ。

図形を描く関数はいろいろあるよ!

今回は円を描くためにcreate_oval()を使ったけど、もちろん円以外の図形も描けるんだ。その一覧表をまとめてみたので、ざっくりおさえておこう!

関数 意味
create_arc(x1,y1,x2,y2,オプション) 弧を描く
create_bitmap(x,y,オプション) ビットマップを描く
create_image(x,y,オプション) 画像を描く
create_line(x1,y1,x2,y2,オプション) 直線を描く
create_oval(x1,y1,x2,y2,オプション) 楕円や円を描く
create_polygon(x1,y1,x2,y2,…オプション) 多角形を描く
create_rectangle(x1,y1,x2,y2,オプション) 四角形を描く
create_text(x,y,オプション) テキストを描く
今日のまとめ

  • Canvas()を使って図形を描こう!
  • いろいろな図形の描きかたを覚えよう!