Canvas createPattern() طريقة

دليل مرجع Canvas

التعريف والاستخدام

createPattern() يكرر العنصر المحدد في الاتجاه المحدد.

العنصر يمكن أن يكون صورة أو فيديو أو أي عنصر <canvas> آخر.

العنصر المكرر يمكن استخدامه للرسم أو الحشو بالأشكال مثل المثلثات أو الدوائر أو الخطوط وما إلى ذلك.

مثال

الصورة المستخدمة:

مصباح

تكرار الصورة في الاتجاهات الأفقية والعمودية:

لم يتم دعم علامة <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(context,صورة,"repeat|repeat-x|repeat-y|no-repeat");

قيمة المعدل

المعدل الوصف
صورة تحديد الصورة أو اللوحة أو عنصر الفيديو الذي سيتم استخدامه.
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>.

دليل مرجع Canvas