下圖是一個早期的圖形計算機PDP-1，可以看到計算機、打字機和屏幕是分離的。當時的文本任務和圖形任務是分開的，因為早期的屏幕無法顯示清晰的文字，而用于跟蹤程序的運行情況，比如寄存器的值。屏幕更多用于存儲一些沒必要打印的臨時值。

最早的顯示技術是使用陰極射線管(Cathode Ray Tubes,CRT)，原理是把電子發射到有磷光體涂層的屏幕上，電子撞擊涂層時會發光幾分之一秒。電子的路徑可以使用磁場控制，屏幕內使用板子或線圈把電子引導到想要的位置。

既然可以這樣控制，就有兩種方法繪制圖形：

引導電子束描繪出形狀，叫做“矢量掃描”，因為發光只持續一小會兒，如果重復掃描得足夠快，可以得到清晰的圖像。如下圖所示，掃描的路徑是一個糖豆人的圖像，掃描速度非常快，雖然每一個時刻只掃一個位置，但是在人的視覺下看到的就是一整個糖豆人的圖像。

按固定路徑，一行行來，從左上掃到右上掃完第一行，然后再從第二行的第一個像素開始，不斷重復。掃描的點只會在特定的位置打開電子束并繪制圖形。這就叫做“光柵掃描”。用這種方法可以用很多小線段繪制形狀甚至文字。和矢量掃描一樣，這種掃描速度非常快。我們在屏幕上看到的清晰的點叫做“像素”。

液晶顯示器，簡稱LCD。和以前的技術相當不同，但LCD也用光柵掃描，每秒多次更新掃描光點照在每個小的紅綠藍的像素的光照強度。而早期很多計算機并不使用像素，因為像素占用了太多內存，200200像素的圖像有40000個像素，哪怕每個像素只用一個bit表示代表黑色或白色（現代像素用字節表示），也會占40000bit內存，比PDP-1全部內存的一半還多。所以計算機科學家和工程師，得想一些技巧來渲染圖形，等內存發展到足夠用。

早期計算機不存大量像素值，而是存符號，8025符號最典型，總共存2000個字符。如果每個字符用8位表示（ASCii），總共也只用存儲16000位。計算機想要顯示符號，需要額外硬件，從內存讀取字符并轉換成光柵圖形，這樣才能顯示到屏幕上。這個硬件叫“字符生成器”，基本算是第一代顯卡（graphics cards）。它內部有一小塊只讀存儲器，簡稱ROM。存著每個字符的圖形，叫“點陣圖案”。如果顯卡看到一個8位二進制，發現是字母K，那么會把字母K的點陣圖案光柵掃描顯示到屏幕的適當位置。為了顯示，“字符生成器”會訪問內存中一塊特殊區域，這塊區域專為圖形保留，叫做屏幕緩沖區（screen buffer）。程序想顯示文字時，就在這塊區域里添加對應的值，留給顯卡來讀取即可。

雖然這種方法只能顯示字符，但是人們還是可以用下劃線和加號來畫盒子、線和其他簡單形狀。但字符集實在太小，做不了什么復雜的事情，因此ASCii字符集進行了各種擴展，加新字符。某些系統上可以用額外的bit定義字體顏色和背景顏色，并僅使用字符集做出下面的DOS界面。

上述的字符生成器可以節省內存但是并無法繪制任意形狀。為了能繪制任意形狀，科學家使用CRT(陰極射線管)上的“矢量模式”。矢量模式的概念是，所有東西都由線組成，包括文字。假如這個視頻是一個200單位寬、100單位高笛卡爾平面，原點(0,0)在左上角，我們可以用矢量命令（來自Vectrex，一個早期矢量系統）畫形狀。首先用reset命令會清空屏幕并把電子槍的繪圖點移動到坐標(0,0)，并把線的亮度設為0。MOVE_TO 50 50把繪圖點移動到坐標(50,50)。INTENSITY 100把光點的強度設為100，這樣移動光點就會進行繪制。然后將光點依次移動到(100,50)(60,75)(50,50)。最后再將光點的強度設回0。如下圖中右邊的命令行。以下的命令占160bit，比存一個龐大的像素矩陣更好。

就像之前的字符生成器把內存里的字符轉成圖形一樣，這些矢量指令也存在內存中，通過矢量顯卡畫到屏幕上。屏幕緩沖區可以按順序存儲數百條命令，用線段畫出復雜圖形。程序還可以更新存在屏幕緩沖區中的值讓圖形隨時間變化，形成動畫。
1962年是一個大里程碑，誕生了Sketchpad，一個交互式圖形界面，用途是計算機輔助設計（CAD），是第一個完整的圖形程序。為了與圖形界面交互，sketchpad用了當時發明不久的輸入設備——光筆，一個有線連著電腦的觸控筆。筆尖使用光線傳感器，檢測到顯示器刷新，然后電腦就可以通過線知道顯示器刷新到筆尖位置時的時間，然后根據時間確定筆尖的位置。有了光筆和各種按鈕，用戶可以畫線和其他簡單形狀。Sketchpad可以讓線條完美平行、完美垂直、動態縮放等，用戶還可以保存或分享設計結果。
最早用真正像素的計算機和顯示器出現于1960年末，內存中的位(bit)對應屏幕上的像素，叫做位圖顯示。你可以把圖形想成一個巨大像素值矩陣，計算機把像素數據存在內存中一個特殊區域，叫“幀緩沖區”（frame buffer）。早期時，這些數據存在內存（RAM）里，后來存在高速視頻內存（Video RAM，VRAM）中。VRAM放在顯卡上訪問更快，如今就是這樣做的。在8位灰度屏幕上，我們可用的顏色范圍是0強度（黑色）——255強度（白色）。
假如我們在60*35像素的位圖屏幕上，我們可以使用“framebuffer[10][10]=255”這樣的代碼吧(10,10)設為白色。我們可以使用以下的循環代碼從(30,0)到(30,35)畫一條線。

如果我們想繪制矩形，就需要4個值——起始點的x,y坐標值以及寬、高值。我們制定填充色為灰色，然后我們使用嵌套for循環填色。我們可以將這個程序包裝成“畫矩形函數”。我們如果在這個位圖屏幕上調用這個畫矩形函數就可以繪制矩形。

程序可以操縱“幀緩沖區”中存儲的像素數據實現交互式圖形，程序員可以用預先寫好的繪圖函數繪制圖形。
以下是本節課的總結：

總結

以上是生活随笔為你收集整理的二十三、屏幕2D图形显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。