Chương 2. Nghiên Cứu Về Canvas
2.3.10.Hình ảnh
Canvas cũng hỗ trợ các ảnh bitmap. Phương thức drawImage() sẽ sao lưu các pixel ảnh từ ảnh gốc (hoặc từ một vùng lựa chọn của ảnh) rồi đưa vào trong Canvas, quay, phóng to thu nhỏ các pixel ảnh này nếu cần thiết. Phương thức drawImage()
nhất là nguồn của ảnh, là các pixel đã sao lưu. Tham số ảnh này thường là một thẻ
<img> hoặc một mặt ảnh được dựng bởi hàm Image() , nhưng cũng có thể là một
thẻ <canvas> hoặc thẻ <video> khác. Nếu thẻ <canvas> hoặc <video> vẫn còn đang được tải xuống trình duyệt thì phương thức drawImage() sẽ không gọi được chúng, tức là các file phải được tải xuống hết thì phương thức drawImage() mới bắt đầu làm việc được.
Trong ba tham số của phương thức drawImage() thì tham số thứ hai và thứ ba là giá trị của tọa độ X và Y của điểm phía trên bên trái của vùng chọn ảnh sẽ được chọn để sử dụng. Hệ tọa độ X, Y ở đây là hệ tọa độ của hình ảnh, được tính với gốc tọa độ là điểm phía trên bên trái của hình ảnh. Tham số thứ bốn và thứ năm của
drawImage() cho biết thông số về chiều rộng và chiều dài của khung hình chữ nhật
đích mà đã khoanh vùng chọn để sử dụng. Góc của khung hình ảnh được chọn là phía trên bên trái có tọa độ (X, Y) cho nên góc đối diện nó là góc phía dưới bên phải sẽ có tọa độ (X + width, Y + height) . Tham số thứ sáu và bảy chính là tọa độ của hình chữ nhật đích mà ta muốn đặt hình ảnh đã khoang vùng ở trên vào ở trong canvas. Với hệ tọa độ chính là hệ tọa độ ban đầu của canvas. Tham số thứ tám và chín là chiều rộng và chiều cao của hình ảnh, hai tham số này cho phép phóng to cũng như thu nhỏ hình ảnh được đặt vào trong canvas.
Xem cấu trúc của drawImage() với chín tham số:
Hình 13: Minh họa cho drawImage()
2.3.11. Vị trí hiển thị (Compositing)