ผ้าใบ HTML createPattern()เมธอด
ภาพที่จะใช้:
ตัวอย่าง
ทำซ้ำรูปภาพทั้งในแนวนอนและแนวตั้ง:
จาวาสคริปต์:
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();
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| createPattern() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
createPattern() วิธีการทำซ้ำองค์ประกอบที่ระบุในทิศทางที่ระบุ
องค์ประกอบอาจเป็นรูปภาพ วิดีโอ หรือองค์ประกอบ <canvas> อื่นๆ
สามารถใช้องค์ประกอบที่ซ้ำกันเพื่อวาด/เติมสี่เหลี่ยม วงกลม เส้น ฯลฯ
| ไวยากรณ์ JavaScript: | บริบท .createPattern( ภาพ ,"ทำซ้ำ|ทำซ้ำ-x|ทำซ้ำ-y|ไม่ซ้ำ"); |
|---|
ค่าพารามิเตอร์
| Parameter | Description | Play it |
|---|---|---|
| image | Specifies the image, canvas, or video element of the pattern to use | |
| repeat | Default. The pattern repeats both horizontally and vertically | |
| repeat-x | The pattern repeats only horizontally | |
| repeat-y | The pattern repeats only vertically | |
| no-repeat | The pattern will be displayed only once (no repeat) |
❮ อ้างอิงผ้าใบ HTML