HTML5 Canvas - Pattern và Shadow
Tạo Pattern
Có phương thức sau để tạo một pattern trên canvas:
| STT | Phương thức và Miêu tả |
|---|---|
| 1 | createPattern(image, repetition) Phương thức này sẽ sử dụng image để tạo pattern. Tham số thứ hai sẽ là một chuỗi với một trong các giá trị sau: repeat, repeat-x, repeat-y, và no-repeat. Nếu chuỗi trống hoặc null, sự lặp lại là không có. |
Ví dụ
Sau đây là ví đụ đơn giản sử dụng phương thức ở trên để tạo một pattern đẹp:
Giả sử chúng ta có pattern sau images/pattern.jpg.
Ví dụ trên sẽ vẽ kết quả sau:
Tạo Shadow
HTML5 canvas cung cấp các khả năng để tạo một shadow đẹp quanh một hình vẽ. Tất cả hoạt động vẽ bị ảnh hưởng bởi 4 thuộc tính global sau:
| STT | Thuộc tính và Miêu tả |
|---|---|
| 1 | shadowColor [ = value ] Thuộc tính này trả về màu shadow hiện tại và có thể được thiết lập để thay đổi màu shadow. |
| 2 | shadowOffsetX [ = value ] Thuộc tính này trả về offset X và có thể được thiết lập để thay đổi offset X |
| 3 | shadowOffsetY [ = value ] Thuộc tính này trả về offset Y hiện tại và có thể được thiêt lập |
| 4 | shadowBlur [ = value ] Thuộc tính này trả về mức độ hiện tại của blur (mờ) áp dụng tới các shadow và có thể được thiết lập để thay đổi mức độ blur. |
Ví dụ
Sau đây là ví dụ sử dụng các thuộc tính trên để vẽ một shadow.
Ví dụ trên sẽ cho kết quả sau:
Bài học HTML5 phổ biến khác tại hoconline.club: