Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội)
BÀI 1. GIỚI THIỆU
I. GIỚI THIỆU VỀ ĐHMT
1. Ngành Đồ hoạ Máy tính
Đồ hoạ máy tính (Computer Graphics) là một nhánh của khoa học máy tính, nghiên cứu các
phương pháp, kỹ thuật và công cụ xử lý đồ hoạ (lưu trữ, thể hiện, biến đổi, tăng chất lượng…).
Những ứng dụng chính của đồ hoạ máy tính:
• Giao diện người dùng đồ hoạ (GUI)
• Xử lý ảnh (Photoshop)
• Thiết kế kỹ thuật (các hệ thống CAD như AutoCAD)
• Dựng hoạt hình (Flash MX, Director)
• Mô phỏng và dựng hình 3D (Maya, 3D Studio Max)
• Video game (trò chơi điện tử)
2. Môn học Đồ hoạ Máy tính
Môn học Đồ hoạ Máy tính dành cho hệ đào tạo tại chức có thời lượng 45 tiết, nhằm hai mục
tiêu chính:
- Cung cấp những khái niệm, kỹ thuật và phương pháp cơ bản của ngành Đồ hoạ Máy tính.
- Tạo cơ hội cho sinh viên được thực hành lập trình đồ hoạ trên một môi trường đồ hoạ. Chúng
tôi chọn môi trường đồ hoạ BGI của Turbo Pascal 7.0 vì tính đơn giản, dễ sử dụng và ngôn ngữ
Pascal quen thuộc với người học nhất.
Thời lượng môn học được chia thành 30 tiết lý thuyết và 15 tiết thực hành.
II. MỘT SỐ KHÁI NIỆM
1. Chế độ hiển thị
Chế độ hiển thị là khái niệm về cách thức máy tính hiển thị kết quả của quá trình xử lý thông
tin và quá trình tương tác giữa người và máy trên thiết bị ra. Có hai chế độ hiển thị:
Chế độ ký tự (text mode) là chế độ hiển thị mà phần tử hiển thị cơ bản là kí tự. Màn hình được
chia thành các hàng và các cột xác định (80x25), giao điểm của các hàng và các cột tạo thành
các ô. Mỗi ô hiển thị được 1 kí tự. Do đó phần tử bé nhất có thể hiển thị được trên màn hình là
kí tự.
Chế độ kí tự có các ưu điểm là tốn ít bộ nhớ, xử lí và hiển thị rất đơn giản và nhanh. Nhược
điểm của chế độ này là chỉ hiển thị được các kí tự, không hiển thị được hình ảnh và các đối

dòng (từ đó suy ra số pixel và kích thước của mỗi pixel). Thường dùng mô tả kích
thước ảnh số, độ phân giải màn hình. Ví dụ nói độ phân giải màn hình là 800x600 có
nghĩa là màn hình được chia thành 800 cột, 600 dòng và có 800 x 600 = 480.000 điểm
ảnh.
• Số pixel tối đa mà thiết bị đồ hoạ có thể lưu trữ, thường dùng mô tả độ phân giải của
máy ảnh số. Chẳng hạn máy ảnh số 3 mega pixel, 5 mega pixel… Từ số điểm ảnh tối đa
ta có thể ước lượng được kích thước tối đa của ảnh. Chẳng hạn máy ảnh 3MP có thể
chụp được ảnh có độ phân giải 2000x1500 (trong khi đó độ phân giải thông thường của
màn hình là 800x600).
• dpi (dot per inch): số dot tạo được trên mỗi inch (thường dùng cho máy in hoặc máy
quét ảnh). Độ nét của trang in hoặc ảnh quét phụ thuộc vào dpi. Các thông số thường
dùng cho máy in laser là 300 dpi hoặc 600 dpi. Từ tham số dpi ta cũng có thể suy ra
được kích thước ảnh. Chẳng hạn nếu ta quét 1 tấm ảnh tức là 5x4 inch với độ phân giải
300 dpi thì kích thước ảnh ta có là 1500x1200 điểm ảnh.
4. Hệ toạ độ và phép chiếu
Hệ toạ độ dùng để xác định vị trí các đối tượng hoặc điểm ảnh, nhờ đó ta thực hiện được các
thao tác đồ hoạ (chẳng hạn để vẽ một đoạn thẳng ta cần chỉ ra toạ độ của 2 điểm đầu mút của
đoạn thẳng đó). Có 3 loại hệ toạ độ khác nhau:
• Hệ toạ độ hiển thị là hệ tọa độ xác định vị trí các điểm ảnh trên thiết bị hiển thị. Do
hạn chế bởi độ phân giải và do đặc điểm của đồ hoạ bitmap, hệ toạ độ hiển thị sử dụng
số nguyên, có trục y hướng xuống dưới và chỉ sử dụng các giá trị toạ độ hữu hạn. Ví dụ
nếu độ phân giải là 800x600 thì tất cả các điểm ảnh đều có giá trị toạ độ x là số nguyên
từ 0 đến 799, toạ độ y từ 0 đến 599.
• Hệ toạ độ thế giới là hệ toạ độ xác định vị trí các đối tượng đồ hoạ khác nhau trong
một thế giới (mặt phẳng, không gian) chung. Hệ toạ độ thế giới sử dụng số thực, các giá
Trang 2
Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội)
trị toạ độ không bị giới hạn và trục y hướng lên trên như hệ toạ độ trong toán học. Hệ
toạ độ thế giới có thể có 2 chiều (2D) hoặc 3 chiều (3D).
• Hệ toạ độ đối tượng là hệ toạ độ dùng mô tả kích thước của đối tượng đồ hoạ và vị trí

24 bit để biểu diễn màu cho một điểm ảnh thì ta có 2
24
(hơn 16 triệu) màu khác nhau.
Có hai phương pháp số hoá màu: số hoá trực tiếp và số hoá theo chỉ số.
Số hoá màu trực tiếp ta số hoá mỗi màu bằng cách mô tả sắc độ của từng thành phần R,G,B
tương ứng với màu đó. Chẳng hạn trong chế độ màu 24 bit, ta dùng 8 bit cho mỗi màu cơ bản,
như vậy có 256 mức độ khác nhau mô tả cường độ của từng màu cơ bản đó.
Trong trường hợp độ sâu màu không lớn, người ta dùng phương pháp biểu diễn màu theo chỉ
số. Chẳng hạn với độ sâu màu 8 bit (tương ứng với 2
8
= 256 màu), người ta sẽ có một bảng màu
(palette) gồm 256 mục, mỗi mục mô tả thành phần RGB của một màu và giá trị màu của mỗi
điểm ảnh sẽ là chỉ số của mục mô tả màu tương ứng.
4. Các hệ màu
Ngoài hệ màu RGB, trong đồ hoạ máy tính còn sử dụng một số hệ màu khác như HSV, CMYK.
Trang 3
Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội)
5. Vùng đệm ảnh (frame buffer) và bộ nhớ đồ hoạ
Bộ nhớ đồ hoạ (Video RAM) là nơi chứa các thông tin mô tả từng pixel của màn hình đồ hoạ,
thường là nằm trên card video. Nếu độ phân giải của màn hình là M cột x N dòng và độ sâu
màu là d bit thì bộ nhớ đồ hoạ có kích thước ít nhất là M x N x d (bit).
Vùng đệm ảnh là vùng nhớ lưu trữ tạm thời dữ liệu đồ hoạ bitmap trong quá trình xử lý. Vùng
đệm ảnh thường được chia thành nhiều khung ảnh, mỗi khung mô tả một ảnh bitmap. Đôi khi
người ta cũng gọi bộ nhớ đồ hoạ (nơi chứa dữ liệu đồ hoạ bitmap được hiển thị trên màn hình)
là vùng đệm ảnh.
IV. PHẦN CỨNG ĐỒ HOẠ
1. Thiết bị ra
Thiết bị ra thực hiện nhiệm vụ hiển thị hình ảnh hoặc kết xuất đối tượng đồ hoạ. Người ta chia
thiết bị ra thành 2 loại là: kết xuất cứng (hard copy) và kết xuất mềm (soft copy).
Thiết bị ra kết xuất cứng là các thiết bị ra mà kết quả hiển thị không thể sửa chữa được như

Trang 4
Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội)
Các loại đĩa quang phổ biến là CD và DVD. Ưu điểm của đĩa quang là gọn nhẹ, rất cơ động và
có các thiết bị đọc rất phổ biến. Dung lượng của các đĩa CD từ 650 MB đến 700 MB, dung
lượng của DVD có thể lên đến 4.7 GB. Nhược điểm của đĩa quang là chỉ đọc (không ghi xoá
được). Cũng có những loại đĩa quang có thể ghi-xoá được nhưng không phổ biến và cần các
thiết bị đọc-ghi đắt tiền. Ngoài ra đĩa quang cũng dễ bị hỏng do va đập, trầy xước…
Đĩa Flash USB hiện đang được dùng ngày một phổ biến do sự gọn nhẹ, tính cơ động và khả
năng ghi xoá tuỳ ý. Dung lượng của đĩa Flash USB ngày một tăng (128MB, 256MB,
512MB…).
Thẻ nhớ cũng là một loại thiết bị lưu trữ đang dần phổ biến, chủ yếu sử dụng cho các thiết bị
nhỏ gọn như máy ảnh kĩ thuật số, điện thoại di động… Với máy tính thì thẻ nhớ ít được sử
dụng hơn do đòi hỏi phải có những thiết bị đọc chuyên dụng.
4. Bộ điều khiển đồ hoạ
Bộ điều khiển đồ hoạ (video controller) phụ trách việc hiển thị hình ảnh trên màn hình, thực
hiện các thao tác đồ hoạ như vẽ hoặc xoá màn hình, thay đổi màu sắc… Bộ điều khiển đồ hoạ
có thể nằm trên một card video rời hoặc được chế tạo sẵn trên mainboard (thường gọi là
onboard).
Để lưu trữ thông tin hình ảnh cần hiển thị trên màn hình, bộ điều khiển đồ hoạ làm việc trực
tiếp với phần bộ nhớ chuyên biệt là bộ nhớ đồ hoạ (Video RAM). Nếu bộ điều khiển đồ hoạ
nằm trên card rời thì trên card cũng lắp sẵn VRAM (và thường có tốc độ nhanh hơn RAM hệ
thống rất nhiều). Ngược lại, nếu bộ điều khiển đồ hoạ là onboard thì sẽ sử dụng một phần của
RAM hệ thống làm VRAM (do đó khả năng và tốc độ sẽ thấp hơn so với card rời).
Bộ điều khiển đồ hoạ thực hiện các thao tác đồ hoạ bằng các thay đổi các thông tin trong
VRAM. Nội dung của VRAM sẽ được các bộ chuyển đổi biến thành tín hiệu chuyển tới màn
hình để thực hiện việc hiển thị.
Các bộ điều khiển đồ hoạ hiện đại còn có thêm các chức năng xử lí 3D như tính toán phép
chiếu, tạo bóng, phủ vân bề mặt…
5. Các thiết bị xử lí khác
Bộ xử lí (CPU) là thiết bị thực hiện tất cả các thao tác xử lí dữ liệu đồ hoạ (video controller cơ

đồ hoạ trong Turbo Pascal là:
InitGraph(Gd,Gm:Integer;Path:String);
Trong đó:
• Gd: Biến kiểu integer chỉ định card màn hình. Do các card màn hình thông dụng hiện
nay đều hỗ trợ chế độ VGA nên ta chỉ cần đặt Gd :=Detect để máy tính tự chọn chế độ
thích hợp.
• Gm: Biến kiểu integer chỉ mode màn hình, thực chất là xác định độ phân giải và độ sâu
màu. Tuy nhiên ta đặt Gd là Detect nên không cần thiết phải khai báo Gm, máy tính sẽ
tự xác định loại card cho màn hình và thiết lập mode màn hình có độ phân giải và độ
sâu màu lớn nhất tương ứng với loại card màn hình đó.
• Path: Biến kiểu string chỉ định đường dẫn vào thư mục chứa các tập tin *.BGI. Nếu tập
tin nằm trong thư mục hiện hành thì có thể khai báo Path là ' '. Ta cũng thường dùng
đường dẫn mặc định là C:\TP\BGI.
Trong một số trường hợp việc khởi tạo đồ họa có thể không thành công (không tìm thấy driver,
driver không tương thích card màn hình, không đủ bộ nhớ...) Để kiểm tra việc khởi tạo đồ hoạ
có thành công không, ta có thể dùng hàm GraphResult. Nếu GraphResult = GrOK thì quá trình
khởi tạo đồ hoạ là thành công.
Muốn ngắt chế độ đồ hoạ để trở lại chế độ văn bản, ta dùng lệnh CloseGraph. Tuy nhiên nếu ta
không dùng lệnh đó thì khi kết thúc chương trình, Turbo Pascal cũng tự động chuyển về chế độ
văn bản.
Trang 6
Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội)
Chương trình ví dụ sau khởi tạo chế độ đồ hoạ, nếu khởi tạo thành công thì sẽ vẽ một đoạn
thẳng chéo màn hình, ngược lại sẽ có một thông báo lỗi.
uses crt,graph;
var gd, gm, i : integer;
BEGIN
gd := detect;
initgraph(gd,gm,'C:\TP\BGI');
if GraphResult <> GrOk then begin

phân giải màn hình (ví dụ, nếu độ phân giải là 640x480 thì ta phải chọn 0≤x1≤x2≤639,
0≤y1≤y2≤479). Tham số clip mô tả thao tác cắt xén với khung nhìn: nếu clip là true thì ta chỉ
được vẽ trong hình chữ nhật được thiết lập làm khung nhìn, các đối tượng vẽ đều bị cắt xén bởi
các cạnh hình chữ nhật. Nếu clip là false thì ta có thể vẽ trên toàn bộ màn hình và các đối tượng
không bị cắt xén. Như vậy, nếu ta dùng khung nhìn với mục đích tạo hệ toạ độ tạm thời cho dễ
thao tác vẽ thì nên đặt tham số clip là false, ngược lại nếu muốn giới hạn vùng màn hình cần vẽ
thì nên đặt clip là true.
Ví dụ, để chuyển gốc toạ độ ra giữa màn hình, ta có thể dùng lệnh:
SetViewPort(320, 240, 600, 400, false);
Chú ý là sau khi thiết lập khung nhìn, gốc toạ độ sẽ là điểm (x1,y1) và các thao tác vẽ tiếp theo
đều sử dụng toạ độ theo gốc mới đó (ngoại trừ lệnh SetViewPort luôn sử dụng toạ độ tuyệt
đối). Ví dụ, sau khi thiết lập khung nhìn bằng lệnh SetViewPort trên, lệnh vẽ tại điểm (0,0) sẽ
là thực hiện tại điểm (320,240) theo toạ độ màn hình.
Con trỏ đồ hoạ
Trong chế độ văn bản có một vị trí gọi là con trỏ (cursor) hay điểm nhắc được biểu thị bằng
một điểm sáng nhấp nháy, là vị trí là nơi thực hiện các thao tác xử lí, chẳng hạn các kí tự được
nhập từ bàn phím sẽ được hiện ra ở vị trí điểm nhắc. Tương tự như vậy, trong chế độ đồ hoạ
cũng có một vị trí gọi là con trỏ đồ hoạ, là vị trí sẽ diễn ra các thao tác đồ hoạ nếu không mô tả
rõ toạ độ. Chẳng hạn nếu ta dùng lệnh OutText để viết ra một chuỗi kí tự mà không mô tả toạ
độ thì xâu kí tự đó sẽ hiện ra ở con trỏ đồ hoạ. Chỉ khác là con trỏ đồ hoạ không nhấp nháy
cũng không hiển thị bằng một điểm sáng nhấp nháy như con trỏ trong chế độ văn bản.
* Các thao tác với con trỏ đồ hoạ:
Để di chuyển con trỏ đồ hoạ đến một vị trí trên màn hình đồ hoạ, ta dùng lệnh MoveTo. Toạ độ
của vị trí đó phụ thuộc vào khung nhìn (là toạ độ tính tương đối theo khung nhìn).
Trang 8
Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội)
MoveTo(x,y: integer)
Để xác định vị trí hiện tại của con trỏ đồ hoạ, ta có 2 hàm GetX và GetY, mỗi hàm trả lại giá trị
hoành độ và tung độ tương ứng của con trỏ đồ hoạ.
2. Màu sắc

lệnh vẽ đường hoặc vẽ chữ sau đó đều dùng màu c cho các đối tượng được vẽ cho đến khi có
một lệnh SetColor tiếp theo thiết lập một màu vẽ khác. Sau khi khởi tạo đồ hoạ màu vẽ mặc
định là màu trắng (white 15).
Trang 9
Bài giảng Đồ hoạ máy tính - Nguyễn Thanh Tùng (khoa CNTT, ĐHSP Hà Nội)
* Thiết lập màu nền:
SetBkColor(c : word)
Màu nền trong TP tương ứng với màu 0 (mặc định là màu đen – black). Khi thực hiện các thao
tác xoá màn hình (ClearDevice) hoặc xoá khung nhìn (ClearViewPort) thì toàn bộ vùng bị xoá
sẽ được tô màu là màu nền.
* Thiết lập màu tô:
Lệnh SetColor chỉ thiết lập màu cho các đối tượng là đường nét hoặc chữ. Với các đối tượng
đặc như hình chữ nhật, một vùng kín, để tô màu ta cần dùng lệnh sau để thiết lập:
SetFillStyle(t: word;c : word)
Trong đó tham số c là màu cần thiết lập để tô, t là tham số mô tả mẫu tô (pattern). Có thêm
tham số mẫu tô là vì không phải lúc nào cũng tô đối tượng theo kiểu màu đặc mà có thể muốn
tô đối tượng theo các mẫu khác như: gạch ngang, gạch chéo, chấm chấm… Các mẫu khác nhau
mà TP hỗ trợ khi tô màu như sau:
3. Các lệnh vẽ điểm
Điểm ảnh (pixel) là đối tượng nhỏ nhất được hiển thị trên màn hình đồ hoạ. Từ các điểm ảnh ta
có thể xây dựng các hình đồ hoạ phức tạp hơn. Mô tả một điểm ảnh ta cần thông tin về vị trí
(toạ độ) và màu sắc.
* Vẽ điểm ảnh
Lệnh PutPixel dùng để vẽ một điểm ảnh lên màn hình đồ hoạ.
PutPixel(x,y: integer; color: word)
Tham số x,y mô tả toạ độ của điểm ảnh, tham số color mô tả màu sắc của điểm ảnh.
* Đọc màu một điểm ảnh
Hàm GetPixel dùng xác định màu của một điểm ảnh.
GetPixel(x,y:integer): word
Hàm này cho ta kết quả là màu của điểm ảnh tại toạ độ x,y.