HTML5 11 – Các cách vẽ khác trong Canvas HTML5

0
131

Bài này chúng ta sẽ đề cập thêm 1 số cách vẽ khác ở trong Canvas ngoài cách vẽ đường thẳng và cách vẽ cung tròn ở các bài trước.

Vẽ chữ trong canvas – font, fillText, strokeText

  • context.font : thiết lập font chữ
  • fillText(text,x,y) : tô chữ từ tọa độ x,y
  • strokeText(text,x,y) : vẽ chữ (không tô đặc)

Ví dụ:

Vẽ hình với màu biến đổi tuyến tính (Linear Gradient)

Vẽ hình với màu biến đổi từ tâm (Radial Gradient)

Chèn ảnh

Thay đổi tọa độ canvas

Trong canvas bạn có thể dịch chuyển tọa độ để vẽ theo tọa độ tương đối bằng các hàm: translaterotatescale

  • context.translate(x, y) : dịch chuyển gốc tọa độ đến điểm x, y
  • context.rotate(ang) : quay hệ tọa độ một góc ang quanh gốc
  • context.scale(sx, sy) : thu phóng tọa độ chiều x và chiều y

Ví dụ sau vẽ chữ trong context, sau đó dịch chuyển tọa độ, quay tọa độ, rồi thu phóng và vẽ lại chữ để xem kết quả:

Kết luận

Bài viết đã cung cấp cho bạn thêm các ví dụ với các cách vẽ khác ở trong canvas. Với việc sử dụng thư viện canvas, ta đã có thêm một tùy chọn nữa trong việc vẽ đồ thị, hình động hoặc cao hơn là viết các game nhỏ. Cám ơn các bạn đã đọc bài viết của mình và mong rằng chúng ta sẽ có những trao đổi hữu ích thông qua bài viết này.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây