Chương 2. Nghiên Cứu Về Canvas
2.3.11. Vị trí hiển thị (Compositing)
vẽ trước đó, các vị trí của các hình sẽ đảo lộn hết nếu không sắp xếp chúng theo một quy tắc hiển thị đúng.
Trong Canvas có một phương thức giúp có thể chỉnh các vị trí hiển thị cho các hình ảnh đó là globalCompositeOperation. Khi sử dụng hình thức này, có thể vẽ được những hình cho ẩn đằng sau hình đã vẽ trước đó, hoặc cho hiển thị những vùng đan nhau, những vùng được cắt bớt bởi vùng chọn của hình trước đó... (không bị giới hạn bởi hình chữ nhật như phương thức clearRect() ) .
Cấu trúc: globalCompositeOperation = type Các kiểu type cho globalCompositeOperation có 11 kiểu:
• source-over: đây là thiết lập mặc định cho thông số
source-over
• destination-over: hình vẽ mới sẽ nằm phía sau hình hiện tại.
destination-over
• source-in: Hình ảnh được hiển thị sẽ là giao của hình ảnh mới và hình ảnh
hiện tại trong canvas, các phần khác được hiển thị nguyên bản. như ở hình là màu của hình mới sẽ được hiển thị do hình ảnh mới được đặt trên hình ảnh cũ.
source-in
• destination-in: Nội dung sẽ được giữ nguyên bản, hình ảnh hiển thị sẽ là
giao của hình ảnh cũ và hình ảnh mới. như ở đây là màu hình ảnh cũ sẽ hiển thị.
• source-out: Hình ảnh được hiển thị là phần của hình ảnh mới không giao với
hình ảnh hiện tại của canvas.
source-out
• destination-out: Hình ảnh hiện tại sẽ được hiển thị, trừ phần giao nhau với
hình ảnh mới.
destination-out
• source-atop: Hình ảnh hiện tại được hiển thị cùng với phần giao nhau của
hình ảnh mới và hình ảnh hiện tại của canvas
source-atop
• destination-atop: Hình ảnh mới được hiển thị cùng phần giao của hình ảnh
mới và hình ảnh hiện tại của canvas với các nội dung của ảnh hiện tại của canvas.
destination-atop
• lighter: Hiển thị tất cả hình ảnh, phần giao nhau của hình ảnh mới và hình
ảnh hiện tại sẽ được thêm màu sắc.
lighter
• darker: Hiển thị tất cả hình ảnh, phần giao nhau giữa hình ảnh mới và hình
ảnh hiện tại sẽ được trừ bớt đi giá trị màu
darker
• xor: Tất cả hình ảnh được hiện lên, phần giao nhau sẽ được hiển thị bình
thường như các điểm khác.
• copy: Hình ảnh mới được hiển thị bình thường, các điểm khác sẽ bị xóa
copy
2.4. Các ứng dụng vẽ canvas phổ biến. 2.4.1. Vẽ đồ thị.
Vẽ đồ thị là một trong các ứng dụng thiết thực nhất sử dụng canvas để vẽ đồ họa trên web. Các đồ thị hiện nay canvas đều có thể hỗ trợ vẽ được, cùng với việc sử dụng javascript, sẽ có thể tạo ra một ứng dụng để vẽ đồ thị ngay trên nền web, mà không tốn băng thông và thời gian tải hình ảnh từ máy chủ.
Hình 15: Đồ thị hình cột.
Ngoài các dạng đồ thị trên thì canvas có thể dùng vẽ các loại đồ thị khác như các dạng đồ thị dạng scatter, line, doughnut, area…
2.4.2. Vẽ hình ảnh minh họa.
Canvas cũng có thể tạo ra một môi trường để tạo các hình ảnh minh họa cho các tài liệu của mình. Có thể vẽ các hình mình họa đơn giản, hay cắt ghép các hình ảnh sử dụng câu lệnh drawImage() . Đây cũng là một ứng dụng hay, tuy nhỏ nhưng cũng mang đến nhiều điều thú vị, nếu sử dụng nhiều các hình minh họa cho tài liệu bằng cách sử dụng canvas, thì nó cũng giúp giảm đi được khá nhiều lượng băng thông nếu sử dụng toàn bộ hình ảnh được tải về từ server.
Hình16: Hình ảnh minh họa.
2.4.3. Game sử dụng canvas.
Canvas còn tạo ra được một môi trường tốt, kết hợp cùng JavaScript,
xem qua một số các game sử dụng canvas qua đường link:
http://www.canvasdemos.com/type/games/
Hình17: Game nuôi cá.
Chương 3. Ứng dụng xây dụng thư viện vẽ đồ thị sử dụng Canvas.