Canvas createPattern() روش

دستورالعمل‌های Canvas

تعریف و استفاده

createPattern() این روش عناصر مشخص شده را در محدوده مشخص تکرار می‌کند.

عناصر می‌توانند تصویر، ویدیو یا سایر عناصر <canvas> باشند.

عناصر تکراری می‌توانند برای نقاشی/تعبیه مستطیل، دایره یا خط و غیره استفاده شوند.

مثال

تصویری که استفاده می‌شود:

lǎng

تکرار تصویر در جهت افقی و عمودی:

مرورگر شما پشتیبانی از تگ HTML5 کانواس ندارد.

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 عناصر تصویر، کanvas یا ویدیو مورد استفاده را مشخص می‌کند.
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

نکته:نسخه‌های 8 و قبل از آن از Internet Explorer پشتیبانی از عنصر <canvas> را ندارند.

دستورالعمل‌های Canvas