HTML canvas createPattern() method
การระบุและการใช้งาน
createPattern() วิธีนี้จะทำให้องค์ประกอบถูกทำนองโดยวิธีที่กำหนด
องค์ประกอบนั้นอาจเป็นภาพ วิดีโอ หรือองค์ประกอบ <canvas> อื่นๆ
องค์ประกอบที่ถูกเรียกใช้ในการวาด/กระดาษกับสี่เหลี่ยมแบบตรงกล้าว หรือวงกลม หรือสาย และอื่นๆ
ตัวอย่าง
ภาพที่ใช้:
ในทิศทางน้ำตกและทิศทางตะวันออกตามรูปภาพ:
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();
ภาษาการเขียน
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
ตัวแปรค่า
| ตัวแปร | รายละเอียด |
|---|---|
| image | กำหนดรูปภาพ แผ่นภาพหรือสิ่งที่เป็นไปได้ที่จะใช้ |
| repeat | โมดี้นี้ซ้ำทั้งทางตั้งแนวตรงและทางตั้งแนวนอน |
| repeat-x | โมดี้นี้ซ้ำแค่ทางตั้งแนวนอน |
| repeat-y | โมดี้นี้ซ้ำแค่ทางตั้งแนวตรง |
| no-repeat | โมดี้นี้แสดงเฉพาะครั้งเดียว (ไม่ซ้ำ) |
การสนับสนุนโปรแกรมนี้
ตัวเลขในตารางระบุรุ่นที่เรียกว่าแบบที่สนับสนุนคุณสมบัตินี้ทั้งหมด
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และรุ่นเก่าของมันไม่สนับสนุนสิ่งที่กล่าวว่า <canvas> อย่าง
