Phương pháp createPattern() của canvas HTML
Định nghĩa và cách sử dụng
createPattern() Phương pháp lặp lại yếu tố được chỉ định trong hướng xác định.
Các yếu tố có thể là hình ảnh, video hoặc các yếu tố <canvas> khác.
Các yếu tố được lặp lại có thể được sử dụng để vẽ/điền hình vuông, hình tròn hoặc đường thẳng, v.v.
Mô hình
Hình ảnh được sử dụng:
Lặp lại hình ảnh theo hướng ngang và dọc:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
Cú pháp
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| image | Định nghĩa yếu tố hình ảnh, canvas hoặc yếu tố video cần sử dụng. |
| repeat | Mặc định. Mô hình lặp lại theo cả hướng ngang và dọc. |
| repeat-x | Mô hình chỉ lặp lại theo hướng ngang. |
| repeat-y | Mô hình chỉ lặp lại theo hướng dọc. |
| no-repeat | Mô hình này chỉ hiển thị một lần (không lặp lại). |
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ yếu tố <canvas>.
