WEBVTT

00:00:02.518 --> 00:00:03.908
有三個步驟你需要知道

00:00:03.908 --> 00:00:06.528
使你的圖畫顯得五彩繽紛

00:00:06.528 --> 00:00:08.559
讓我們先從幫背景填色開始

00:00:08.559 --> 00:00:11.870
要做到這點，只要寫background和 (

00:00:11.870 --> 00:00:13.892
然後這行的其餘部分會自動完成

00:00:13.892 --> 00:00:17.093
如果你仔細看，你會注意到這其實是一個函數呼叫

00:00:17.093 --> 00:00:19.074
看，函數的名稱在這

00:00:19.074 --> 00:00:22.235
background，然後 ()

00:00:22.235 --> 00:00:24.778
有三個參數在裡面，被逗號隔開

00:00:25.018 --> 00:00:29.782
這三個數字代表紅、綠及藍的量

00:00:29.782 --> 00:00:31.226
在背景顏色中

00:00:31.236 --> 00:00:34.792
可以被設成從 0 到 255 的其中一個數字

00:00:35.142 --> 00:00:37.393
0 是指完全沒有該色

00:00:37.393 --> 00:00:39.787
而 255 是指我們要輸出該色最大值

00:00:39.787 --> 00:00:42.963
現在，我要輸出紅色最大值而不用藍和綠

00:00:42.963 --> 00:00:45.130
這就是為什麼背景是超級明亮的紅色

00:00:45.130 --> 00:00:48.128
如果我使第一個數字變小，就會比較不紅

00:00:48.138 --> 00:00:49.662
因此它看起來會像個較暗的紅色

00:00:49.662 --> 00:00:51.332
我可以繼續調整一下這些數字

00:00:51.332 --> 00:00:53.258
並看看我可以造出什麼樣的顏色

00:00:53.258 --> 00:00:56.144
或者，我可使用我們便利絕妙的選色器

00:00:56.204 --> 00:00:58.942
它會幫我設定全三個數字

00:00:59.382 --> 00:01:00.671
現在最重要的是要知道

00:01:00.671 --> 00:01:02.980
背景函數真正做的事

00:01:02.980 --> 00:01:06.100
只是畫一個大大有顔色的正方形在這整個畫布上

00:01:06.370 --> 00:01:08.765
如果我像這樣把它移到我程式的最末端

00:01:08.765 --> 00:01:10.500
它便會把那大背景正方形

00:01:10.500 --> 00:01:11.905
畫在我所有圖形的上面

00:01:12.165 --> 00:01:13.520
也許你正在想：那真笨，

00:01:13.520 --> 00:01:14.715
哪會有人想那麼做？

00:01:14.715 --> 00:01:16.530
但，世事難料

00:01:16.770 --> 00:01:18.610
我們暫時先把它留在上方

00:01:19.250 --> 00:01:20.669
現在，來把我們的圖形塗色吧！

00:01:20.819 --> 00:01:22.306
也許能輔助你的就是把電腦想成

00:01:22.306 --> 00:01:23.983
一個顏色助理

00:01:23.983 --> 00:01:27.000
或某種顏色管家

00:01:27.000 --> 00:01:29.357
基本上就是某個負責顏色的人

00:01:29.547 --> 00:01:34.590
這顏色負責人只能拿一個彩色筆在他的左手

00:01:34.620 --> 00:01:39.079
及一桶油漆在他的右手

00:01:39.209 --> 00:01:42.513
電腦使用彩色筆去畫所有這些邊框

00:01:42.513 --> 00:01:44.550
而用那桶油漆去填滿圖形

00:01:44.550 --> 00:01:47.269
現在，彩色筆是黑色，而桶子內有白漆

00:01:47.499 --> 00:01:49.060
你可以改變彩色筆的顏色

00:01:49.060 --> 00:01:51.531
靠著呼叫這函數，stroke

00:01:51.531 --> 00:01:55.274
它會自動完成，然後你可以選取一個顏色

00:01:55.274 --> 00:01:58.310
這會替換顏色負責人拿著的彩色筆

00:01:58.560 --> 00:02:00.230
所以在這行後畫的所有圖形

00:02:00.230 --> 00:02:02.180
將會用一隻粉紅色的彩色筆來畫

00:02:02.320 --> 00:02:04.950
有時候你不想要邊框在你的圖形上

00:02:05.010 --> 00:02:06.544
那也有個函數！

00:02:06.544 --> 00:02:10.175
它叫做noStroke，而這是第一次

00:02:10.175 --> 00:02:12.686
我們看到一個不帶任何參數的函數

00:02:12.686 --> 00:02:17.009
我們只有這一組空的 () 和 ;

00:02:17.009 --> 00:02:19.428
現在你能看到我們的圖形沒有邊框

00:02:19.868 --> 00:02:21.531
我們可以替換顏色負責人的油漆桶

00:02:21.531 --> 00:02:24.594
靠著呼叫這函數，Fill

00:02:25.484 --> 00:02:27.509
現在，從這行程式碼往前繼續

00:02:27.509 --> 00:02:29.924
你將用這明亮的紅色塗滿所有圖形

00:02:30.024 --> 00:02:31.961
就像我們有一個noStroke函數

00:02:31.961 --> 00:02:37.308
我們也有一個noFill函數，也不帶任何參數

00:02:38.028 --> 00:02:41.297
它使我們所有的圖形變透明，它們沒被塗色

00:02:42.247 --> 00:02:44.273
現在讓我們繼續幫這個人塗色

00:02:44.273 --> 00:02:46.987
我們開始先畫一個三角形作為他的身體

00:02:46.987 --> 00:02:49.022
我要選一個stroke顏色給它

00:02:49.022 --> 00:02:50.479
設定邊框

00:02:51.219 --> 00:02:54.856
讓我們用一個暗綠色

00:02:56.246 --> 00:02:58.407
現在我們選個填充色

00:02:58.757 --> 00:03:02.241
嗯...什麼好呢？也許來個較淺的綠色

00:03:02.241 --> 00:03:04.475
淺一點的綠色，不錯

00:03:04.965 --> 00:03:07.547
而他的臉，我們不想他的臉有綠色的邊框

00:03:07.547 --> 00:03:10.189
所以我會改他臉的stroke顏色

00:03:12.899 --> 00:03:17.802
我想要一個暗褐棕色的邊框

00:03:18.072 --> 00:03:19.767
然後挑選一個不同的fill顏色

00:03:19.767 --> 00:03:20.942
天啊！

00:03:21.202 --> 00:03:24.777
哪一個臉的顏色適合呢？嗯…

00:03:25.217 --> 00:03:29.343
那是比較適合臉的顏色，對吧？

00:03:30.033 --> 00:03:33.104
現在，接下來兩行，這兩個橢圓形，是他的手

00:03:33.114 --> 00:03:35.641
我要他的手跟他的臉一樣顏色

00:03:35.641 --> 00:03:37.269
所以我不會替換彩色筆

00:03:37.269 --> 00:03:38.507
我不會替換油漆桶

00:03:38.507 --> 00:03:40.837
我們只要保持stroke和fill相同

00:03:40.837 --> 00:03:42.250
然後繼續到他的嘴巴

00:03:42.460 --> 00:03:44.891
他的嘴就是這條線

00:03:46.551 --> 00:03:50.592
而線沒有fill顏色因為沒有什麼可填

00:03:50.672 --> 00:03:53.153
但我們可以改這線的邊框顏色

00:03:54.063 --> 00:03:56.156
紅色是個蠻適合他嘴巴的顏色

00:03:56.246 --> 00:03:57.814
現在，輪到他的鏡框

00:03:57.834 --> 00:04:00.005
再一次地，我們只需要設定stroke

00:04:00.085 --> 00:04:01.748
什麼顏色適合眼鏡呢？

00:04:01.838 --> 00:04:03.683
黑色蠻經典的

00:04:03.793 --> 00:04:07.724
而他的眼鏡鏡片呢

00:04:07.814 --> 00:04:11.465
我想矩形跟他的鏡框有相同的邊框

00:04:11.465 --> 00:04:14.796
我不會去改stroke，但我會給它一個填fill顏色

00:04:17.126 --> 00:04:20.032
把它設成黑色來配鏡框

00:04:20.032 --> 00:04:22.487
好了，我們老兄塗好色了！

00:04:22.487 --> 00:04:26.070
喔～～～～耶！