Return to Video

填色入門

  • 0:03 - 0:04
    有三個步驟你需要知道
  • 0:04 - 0:07
    使你的圖畫顯得五彩繽紛
  • 0:07 - 0:09
    讓我們先從幫背景填色開始
  • 0:09 - 0:12
    要做到這點，只要寫background和 (
  • 0:12 - 0:14
    然後這行的其餘部分會自動完成
  • 0:14 - 0:17
    如果你仔細看，你會注意到這其實是一個函數呼叫
  • 0:17 - 0:19
    看，函數的名稱在這
  • 0:19 - 0:22
    background，然後 ()
  • 0:22 - 0:25
    有三個參數在裡面，被逗號隔開
  • 0:25 - 0:30
    這三個數字代表紅、綠及藍的量
  • 0:30 - 0:31
    在背景顏色中
  • 0:31 - 0:35
    可以被設成從 0 到 255 的其中一個數字
  • 0:35 - 0:37
    0 是指完全沒有該色
  • 0:37 - 0:40
    而 255 是指我們要輸出該色最大值
  • 0:40 - 0:43
    現在，我要輸出紅色最大值而不用藍和綠
  • 0:43 - 0:45
    這就是為什麼背景是超級明亮的紅色
  • 0:45 - 0:48
    如果我使第一個數字變小，就會比較不紅
  • 0:48 - 0:50
    因此它看起來會像個較暗的紅色
  • 0:50 - 0:51
    我可以繼續調整一下這些數字
  • 0:51 - 0:53
    並看看我可以造出什麼樣的顏色
  • 0:53 - 0:56
    或者，我可使用我們便利絕妙的選色器
  • 0:56 - 0:59
    它會幫我設定全三個數字
  • 0:59 - 1:01
    現在最重要的是要知道
  • 1:01 - 1:03
    背景函數真正做的事
  • 1:03 - 1:06
    只是畫一個大大有顔色的正方形在這整個畫布上
  • 1:06 - 1:09
    如果我像這樣把它移到我程式的最末端
  • 1:09 - 1:10
    它便會把那大背景正方形
  • 1:10 - 1:12
    畫在我所有圖形的上面
  • 1:12 - 1:14
    也許你正在想：那真笨，
  • 1:14 - 1:15
    哪會有人想那麼做？
  • 1:15 - 1:17
    但，世事難料
  • 1:17 - 1:19
    我們暫時先把它留在上方
  • 1:19 - 1:21
    現在，來把我們的圖形塗色吧！
  • 1:21 - 1:22
    也許能輔助你的就是把電腦想成
  • 1:22 - 1:24
    一個顏色助理
  • 1:24 - 1:27
    或某種顏色管家
  • 1:27 - 1:29
    基本上就是某個負責顏色的人
  • 1:30 - 1:35
    這顏色負責人只能拿一個彩色筆在他的左手
  • 1:35 - 1:39
    及一桶油漆在他的右手
  • 1:39 - 1:43
    電腦使用彩色筆去畫所有這些邊框
  • 1:43 - 1:45
    而用那桶油漆去填滿圖形
  • 1:45 - 1:47
    現在，彩色筆是黑色，而桶子內有白漆
  • 1:47 - 1:49
    你可以改變彩色筆的顏色
  • 1:49 - 1:52
    靠著呼叫這函數，stroke
  • 1:52 - 1:55
    它會自動完成，然後你可以選取一個顏色
  • 1:55 - 1:58
    這會替換顏色負責人拿著的彩色筆
  • 1:59 - 2:00
    所以在這行後畫的所有圖形
  • 2:00 - 2:02
    將會用一隻粉紅色的彩色筆來畫
  • 2:02 - 2:05
    有時候你不想要邊框在你的圖形上
  • 2:05 - 2:07
    那也有個函數！
  • 2:07 - 2:10
    它叫做noStroke，而這是第一次
  • 2:10 - 2:13
    我們看到一個不帶任何參數的函數
  • 2:13 - 2:17
    我們只有這一組空的 () 和 ;
  • 2:17 - 2:19
    現在你能看到我們的圖形沒有邊框
  • 2:20 - 2:22
    我們可以替換顏色負責人的油漆桶
  • 2:22 - 2:25
    靠著呼叫這函數，Fill
  • 2:25 - 2:28
    現在，從這行程式碼往前繼續
  • 2:28 - 2:30
    你將用這明亮的紅色塗滿所有圖形
  • 2:30 - 2:32
    就像我們有一個noStroke函數
  • 2:32 - 2:37
    我們也有一個noFill函數，也不帶任何參數
  • 2:38 - 2:41
    它使我們所有的圖形變透明，它們沒被塗色
  • 2:42 - 2:44
    現在讓我們繼續幫這個人塗色
  • 2:44 - 2:47
    我們開始先畫一個三角形作為他的身體
  • 2:47 - 2:49
    我要選一個stroke顏色給它
  • 2:49 - 2:50
    設定邊框
  • 2:51 - 2:55
    讓我們用一個暗綠色
  • 2:56 - 2:58
    現在我們選個填充色
  • 2:59 - 3:02
    嗯...什麼好呢？也許來個較淺的綠色
  • 3:02 - 3:04
    淺一點的綠色，不錯
  • 3:05 - 3:08
    而他的臉，我們不想他的臉有綠色的邊框
  • 3:08 - 3:10
    所以我會改他臉的stroke顏色
  • 3:13 - 3:18
    我想要一個暗褐棕色的邊框
  • 3:18 - 3:20
    然後挑選一個不同的fill顏色
  • 3:20 - 3:21
    天啊！
  • 3:21 - 3:25
    哪一個臉的顏色適合呢？嗯…
  • 3:25 - 3:29
    那是比較適合臉的顏色，對吧？
  • 3:30 - 3:33
    現在，接下來兩行，這兩個橢圓形，是他的手
  • 3:33 - 3:36
    我要他的手跟他的臉一樣顏色
  • 3:36 - 3:37
    所以我不會替換彩色筆
  • 3:37 - 3:39
    我不會替換油漆桶
  • 3:39 - 3:41
    我們只要保持stroke和fill相同
  • 3:41 - 3:42
    然後繼續到他的嘴巴
  • 3:42 - 3:45
    他的嘴就是這條線
  • 3:47 - 3:51
    而線沒有fill顏色因為沒有什麼可填
  • 3:51 - 3:53
    但我們可以改這線的邊框顏色
  • 3:54 - 3:56
    紅色是個蠻適合他嘴巴的顏色
  • 3:56 - 3:58
    現在，輪到他的鏡框
  • 3:58 - 4:00
    再一次地，我們只需要設定stroke
  • 4:00 - 4:02
    什麼顏色適合眼鏡呢？
  • 4:02 - 4:04
    黑色蠻經典的
  • 4:04 - 4:08
    而他的眼鏡鏡片呢
  • 4:08 - 4:11
    我想矩形跟他的鏡框有相同的邊框
  • 4:11 - 4:15
    我不會去改stroke，但我會給它一個填fill顏色
  • 4:17 - 4:20
    把它設成黑色來配鏡框
  • 4:20 - 4:22
    好了，我們老兄塗好色了！
  • 4:22 - 4:26
    喔～～～～耶！
Title:
填色入門
Description:

這只是一個互動程式設計指導的畫面快照，為協助字幕和翻譯編輯而準備的。看我們其他的指導影片會比較好：https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
04:27

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.