طريقة createPattern() لـ HTML canvas
التعريف والاستخدام
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();
القواعد النحوية
createPattern(ctx,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>.
