Canvas createPattern() phương pháp
Định nghĩa và cách sử dụng
createPattern() Phương pháp này lặp lại yếu tố được chỉ định trong hướng được chỉ định.
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 chữ nhật, hình tròn hoặc đường line v.v.
Mô hình
Hình ảnh được sử dụng:
Lặp lại hình ảnh theo cả 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 các yếu tố hình ảnh, canvas hoặc video cần sử dụng. |
| repeat | Mặc định. Mô hình này lặp lại theo cả hướng ngang và dọc. |
| repeat-x | Mô hình này chỉ lặp lại theo hướng ngang. |
| repeat-y | Mô hình này 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 sớm hơn không hỗ trợ phần tử <canvas>.
