本篇開始:
- 我的開發環境是win11
- python是3.10.7版本
- kivy我設定在2.1.0版本
- 編碼的工具是Visual Studio Code(VS Code)
【本篇說明】在kivy裡面，還有一些部件可用來建構使用者介面(UI)，比如 canvas、canvas.before、DegreeButton等，這次要講的是 canvas，中文翻譯為"帆布"，或可稱呼"帆布背景"，是很常用的部件之一，以下分享常用的語法。
1.首先在main.py寫下固定的程式碼
以下.py程式碼:(在vscode開啟python檔案，取名為main.py，以下簡稱.py)
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
class firstlayout(FloatLayout):
pass
class Mainapp(App):
def build(self):
return firstlayout()
if __name__ == "__main__":
Mainapp().run()
▲說明:這邊 kivy language(kv)，我使用的是"相同命名方式"，如果不太懂我說的，可參考這篇:【kivy language】如何使用 kivy language(kv)。
▲說明:main.py程式碼
2.新增 kivy檔案，取名 main.kv，並且放在同資料夾內
3.加入 canvas基本語法
以下.kv程式碼:(在vscode開啟kivy檔案，以下簡稱.kv)
canvas:
Color:
rgb: (117/255, 220/255, 141/255)
Rectangle:
size: self.size
pos: self.pos
▲說明:
1.canvas 字首'c'是小寫，主要分成兩種屬性(顏色及形狀)
2.Color 字首'C'是大寫，rgb: 顏色代碼
3.Rectangle 字首'R'是大寫，主要分成兩種屬性(大小及位置)
4.size:self.size，代表視窗本身大小
5.pos:self.pos，代表視窗本身位置
▲說明:main.kv程式碼
▲說明:執行python檔案，發現canvas佈滿整個視窗範圍
4.改變 canvas顏色
以下.kv程式碼:
Color:
rgb: (0.1, 0.2, 0.3)
▲說明:可填入分數、小數或是英文代碼'blue'來表示
▲說明:rgb: (0.1, 0.2, 0.3)，變成深藍色了
5.改變 canvas大小
以下.kv程式碼:
Rectangle:
size: 200, 200
pos: self.pos
▲說明:視窗預設大小為 1000,750，canvas大小為 200, 200
6.改變 canvas位置
以下.kv程式碼:
Rectangle:
size: 200, 200
pos: 400, 300
▲說明:視窗預設大小為 1000,750，以左下角為原點，用xy座標來看，canvas位置在 400, 300
本篇小結
加入 canvas，簡單操作就能改變其顏色、大小以及位置。
本篇結束:
在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。
