讓我們探索更多繪圖的事情吧
除了長方形外,我們還可以畫什麼?
我們能用ellipse這個字來畫橢圓形
這是另一個電腦明白的指令
我們其實有一個特殊的程設用詞來代表指令
我們把它們稱作「函數」
從現在起我會使用函數這詞來代表指令
我們繼續寫入ellipse這函數
然後括號 () 及一個分號 ;
行不通!
出現了這個有關參數的錯誤訊息
無論哪是什麼
跟我們剛用rect來寫的比較,你能看到我們少了什麼嗎?
我們剛寫入ellipse時,我們沒有給它數字
像我們畫長方形時所做的
這些數字在這裡稱作「參數」
我們說我們傳遞參數去函數裏
它們控制函數如何運作
沒有這些參數
程式便不知道你想將橢圓形畫在哪裡
或要把它畫得多大
現在那錯誤訊息顯得比較合理了
讓我們繼續傳入四個參數
來控制我們要那橢圓形向右移多少、向下移多少、多寬、和多高
就像先前,我們可以找點樂趣,將我們的橢圓形移來移去
甚至將它變大變小
現在我們已有基本知識,來試畫一個大橢圓形
在畫布的正中央
第一個你可能會提出的的問題是:中央在哪裡?
複習一下,左上角是0
右邊,如果你記得的話,是400,而最下方也是400
所以如果我們想想:正中央會在哪呢?
我們會說:是向右400的一半,所以200
然後向下400的一半,所以200
我們就那樣做
來用我們的ellipse函數
傳入參數,去做一個挺大的橢圓形
有了!
只是好玩,讓我們也放一個長方形在那
寫入 rect(200, 200 ,也許小一點,100, 100);
嗯,這蠻有趣的
這小小的實驗告訴我們什麼?
我們可以看到 200, 200 的點
實際上是指我們該放置橢圓形的中心位置
但對長方形卻是不同的,因為對長方形來說
200, 200 是指我們放置長方形的左上角位置
那是我們試定圖形位置時須記住的
現在讓我們進入簡易線形
函數名稱就叫做line而已
我們又傳入四個參數給它
但一條線的大小跟一個長方形的不太一樣,對吧?
所以那這些數字會控制什麼?
第一個和第二個參數,跟之前一樣
指的是這條線應該從多右方及多下方開始
而第二之後的參數 --
對不起,是第二組參數,90和200
將代表這條線應該在多右方及多下方終止
現在我們了解那是如何運作
讓我們來看看某些一開始會看起來相當奇怪的東西
如果我使長方形在左上角起始的話
然後再指定那長方形的左上角的話,會令什麼事情發生?
且相當大
我們甚至可以使它那麼大,但我想那有點太大了
我們看到它逐漸開始令橢圓形消失
我們其實可以使它完全消失
現在我們懷疑它跑去哪了
這程式所做的是依照次序地繪製你的圖形
首先它畫出橢圓形,然後它畫那長方形在上面
最後它便畫線條
所以橢圓形仍然在那,只是像你看到的,在底下而已
這是要記住的很重要的一點
因為如果我們先畫線條的話會發生什麼事?
我們就完全看不到它了,不是嗎?
你可能會在程式中那麼做然後懷疑:我的線跑哪去了?
事實是它還在那,只是現在被掩蓋住
被橢圓形及長方形同時所掩蓋
我們能控制哪些圖形被畫在哪其他圖形的上面
藉著改變它們被寫入在程式中的次序
現在,我想在我們結束之前介紹一些技術用語
就像你可能已在數學中學到的
我們可以用x這個字母來表示向右移多少
就像我們提過的
用y字母表示向下移多少
不習慣的話那可能看似有點奇怪
但它是比每次說「向右移多少和向下移多少」容易
我們橢圓形的前兩個參數,例如說
在說x該是200,而y該是229
現在你們知道了
就跟說「向右移多少和向下移多少」一樣
一個你可能會提出的第二個非常好的問題是:
這整個時間我們使用的是什麼單位?
我們說的是200公分、200英寸還是200英里?
我們使用的單位稱作「像素」
而一個像素是你螢幕上一個微小的點
這個畫布事實上就是400像素寬
那就是為什麼我們總是說左上角是0
然後向右到底是400,因為它是400個像素
類似地,當我們說200,實際上我們指的是200個像素
你該已懂了
太好了!
現在你已經完全了解函數 line、ellipse、和rect
以及它們的參數
我們已經涵蓋了很多,只要堅持下去,持續發掘
很快你便會找到它的竅門