Giới Thiệu

• Canvas là hàm API vẽ 2 chiều của HTML5
• Hình vẽ sử dụng Canvas:
  • Cập nhật được trong thời gian thực
  • Lưu lại dưới dạng .png
• Sử dụng các thành phần Canvas để xác định bề mặt vẽ, nhưng phải xác định hướng vẽ và dòng kết quả, hình dạng, màu sắc với JavaScript
• Canvas luôn làm việc với Canvas:
  • Định nghĩa thành phần canvas trong HTML
  • Tham chiếu bối cảnh vẽ cho các thành phần từ đó như một biến trong JavaScript
• Khởi tạo:
  • Lệnh Canvas:
  • Kết hợp vẽ với JavaScript

• Đối tượng getContext(“2d”) là đối tượng HTML5 chứa các phương thức vẽ đường path, hình hộp, hình tròn, character, hình ảnh, v.v…

• Định nghĩa kiểu màu tô là màu đỏ

• Định nghĩa vẽ một hình chữ nhật kích thước 150×75, bắt đầu từ góc trên bên trái (0,0)

Ưu điểm của thành phần Canvas

• Cho phép tạo graphic, hình động (animation), gradient, các đối tượng đồ họa khác bằng mã
• Đã được các trình duyệt phổ biến hỗ trợ
• Khả năng mạnh mẽ: làm game, animation, chart, graph, vector,…
• Không phải sử dụng thêm plugin

Sử dụng Canvas

• Vẽ Đường Path: tạo nên các hình dạng cơ sở
• Vẽ Hình Chữ Nhật:

• X,y: Tọa độ vẽ hình
• Width, height: Kích thước hình

• Vẽ Đường Thẳng:

• Vẽ Đường Tròn:

• Vẽ Đường Cong:

• Vẽ Text:

• Tô Màu Gradient:

• Vẽ Hình Chuyển Động Lặp (Loop)
  • Kết hợp sử dụng với hàm JavaScript (setInterval), sẽ tạo ra được những chuyển động lặp

• Chèn Thêm Hình Ảnh:

• Sử dụng biến đổi:
  • Sử dụng kết hợp với khung hình vẽ sẽ tạo ra hình ảnh đẹp hơn
  • 3 loại biến đổi:
    • Scaling
    • Rotating
    • Translating
• Sử dụng kết hợp với hàm: Save, Restore

KẾT LUẬN: Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để Ứng dụng free   giải đáp thắc mắc nhé! Cảm ơn các bạn đã theo dõi bài viết.