Return to Video

繪製文字(二)

  • 0:01 - 0:05
    我們已學會使用 text
    現在來點較多花式的
  • 0:05 - 0:06
    第一個花式東西
  • 0:06 - 0:08
    是開始利用 string（字串）這詞
  • 0:08 - 0:11
    你也許會想：
    「毛線？那是我家貓在玩的。」
  • 0:11 - 0:13
    但對編程師來説
    字串是特殊用語
  • 0:13 - 0:15
    我們用來指一組文字
  • 0:15 - 0:17
    你可以將它想成一串字元
  • 0:17 - 0:19
    你的名字、你學校的名字
    都是字串
  • 0:19 - 0:22
    你發出過的任何文字訊息
    都是字串
  • 0:22 - 0:26
    就在這樣想
    字串等於文字
  • 0:26 - 0:29
    我們已經用過字串繪圖和填色
  • 0:29 - 0:31
    我們可以一併使用變數和字串嗎？
  • 0:31 - 0:31
    當然可以！
  • 0:31 - 0:33
    就像你平時給變數一個數字
  • 0:33 - 0:36
    你也能給變數一個字串
  • 0:36 - 0:37
    我們可以說
  • 0:37 - 0:41
    var myName=(你的名字)
    如 “Sophia”
  • 0:41 - 0:43
    記得加引號
  • 0:43 - 0:46
    我們就把變數 myName
    放入引號文字裡
  • 0:46 - 0:49
    而不直接用 "Sophia"
    像我們之前做的
  • 0:49 - 0:51
    這樣看來沒啥不同
  • 0:51 - 0:53
    但我們其實可以寫幾次
  • 0:53 - 0:55
    你看，一次那，一次那
  • 0:55 - 0:57
    我們也可添一點藝術風
  • 0:57 - 1:01
    你只需把這一個變數
    改成你的名字
  • 1:01 - 1:04
    你的名字就出現三次
  • 1:04 - 1:06
    先刪除這個
  • 1:06 - 1:08
    如果想來點瘋狂的
  • 1:08 - 1:13
    字串可以相加嗎？
    就像讓變數相加那樣?
  • 1:13 - 1:15
    沒錯，我們可以的
  • 1:15 - 1:17
    電腦會把兩字串連在一起
  • 1:17 - 1:20
    舉例來說
    先刪掉這個
  • 1:20 - 1:23
    只要輸入一次
    再用另一個 var message
  • 1:23 - 1:28
    它將會是 myName
    加上一堆驚嘆號
  • 1:28 - 1:30
    如果我們將 message
    放入 text 來畫這變數
  • 1:30 - 1:32
    而不直接用 myName
  • 1:32 - 1:36
    我們能看到
    它做的只是放之前那些驚嘆號
  • 1:36 - 1:38
    到 myName 的後面
  • 1:38 - 1:40
    我們能令這更有趣點
  • 1:40 - 1:43
    如果我們想寫 message 兩次
  • 1:43 - 1:45
    這其實蠻合理
  • 1:45 - 1:49
    字串相加表示在一個字串後面
    接上另一個
  • 1:49 - 1:52
    你可能想
    我們能試試超瘋狂嗎？
  • 1:52 - 1:55
    把字串相乘、相除和相減如何？
  • 1:55 - 1:56
    這辦得到嗎?
  • 1:56 - 1:57
    恐怕不行
  • 1:57 - 1:59
    字串只能相加
  • 1:59 - 2:02
    數字變數可以相除和相減
  • 2:02 - 2:05
    但字串變數只能相加
  • 2:05 - 2:07
    但保持好奇心
    和問這種問題
  • 2:07 - 2:10
    便是寫程式的正確態度
  • 2:10 - 2:13
    你可能會想: 字串相減代表什麼?
  • 2:13 - 2:17
    我們也能用字串
    做動畫和滑鼠互動
  • 2:17 - 2:20
    例如，我們可以令
    字串跟著滑鼠移動
  • 2:20 - 2:23
    只要把字串放入繪圖迴圈
    像畫矩形一樣
  • 2:23 - 2:27
    怎麼做呢?
    輸入 var draw
  • 2:27 - 2:30
    然後貼在這裡
  • 2:30 - 2:33
    這跟「動畫入門」一節很像
  • 2:33 - 2:36
    你可能會想，好
    如果想讓它跟著滑鼠跑
  • 2:36 - 2:39
    就得用 mouseX 和 mouseY
  • 2:39 - 2:43
    嘿! 我們正用名字畫圖呢
  • 2:43 - 2:47
    當然如果我們想的話
    也能輕易設定背景 background
  • 2:47 - 2:51
    我看，就淺藍色吧
  • 2:51 - 2:55
    現在字串就追著滑鼠囉
  • 2:55 - 2:57
    跟在矩形那節做的一樣
  • 2:57 - 2:59
    現在，來個最後的好玩把戲
  • 2:59 - 3:03
    利用動畫讓字體增大，增大，再增大
  • 3:03 - 3:06
    在這我們設 textSize 為 30
    變數那一節學過
  • 3:06 - 3:11
    我們可以用 var howBig 等於 30
    而不單單用 30
  • 3:11 - 3:15
    然後用這變數直接取代 30
  • 3:15 - 3:16
    現在效果一樣
  • 3:16 - 3:21
    接著要改變某東西才能做出動畫
  • 3:21 - 3:25
    設定 howBig 等於 howBig 加 1
  • 3:25 - 3:28
    意思是
    記得 howBig 是多少嗎?
  • 3:28 - 3:32
    先前howBig多大
    現在就加1讓它變大些
  • 3:32 - 3:35
    接著重跑程式
  • 3:35 - 3:37
    動動滑鼠，就像這樣了
  • 3:37 - 3:40
    字體越來越大
  • 3:40 - 3:43
    就因為有這一行
  • 3:43 - 3:45
    你自己可能會想
  • 3:45 - 3:48
    怎讓字體加速變大?
  • 3:48 - 3:52
    現在你不只學會
    用程式碼控制形狀
  • 3:52 - 3:55
    你也學會於程式碼裏使用文字
Title:
繪製文字(二)
Description:
more » « less
Video Language:
English
Duration:
03:57

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.