موزع کانواس HTML canvas createPattern()
تعریف و استفاده
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 |
نکته:نسخه‌های 8 Internet Explorer و قدیمی‌تر از <canvas> پشتیبانی نمی‌کنند.
