English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
هو طريقة createPattern() التي تستخدمها API Canvas 2D لإنشاء نمط باستخدام الصورة المحددة (CanvasImageSource). إنه يتكرر الصورة الأساسية في الاتجاه المحدد من خلال معامل التكرار. يعود هذا الطريقة بـ CanvasPattern. ctx.createPattern(image, repetition);
تكرار الصورة في الاتجاهات الأفقية والعمودية:
JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>استخدام طريقة createPattern() في HTML canvas (دليل أساسي من موقع oldtoolbag.com)</title>
</head>
<body>
<p>تطبيق الصورة:</p>
<img src="haha.gif" id="lamp">
<p>اللوحة:</p>
<button onclick="draw('repeat')">يكرر</button>
<button onclick="draw('repeat-x')">يكرر-x</button>
<button onclick="draw('repeat-y')">يكرر-y</button>
<button onclick="draw('no-repeat')">لا يكرر</button>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 canvas.
</canvas>
<script>
function draw(direction)
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,direction);
ctx.rect(0,0,220,128);
ctx.fillStyle=pat;
ctx.fill();
}
</script>
</body>
</html>التحقق من ‹/›IEFirefoxOperaChromeSafari
Internet Explorer 9،Firefox،Opera،Chrome وSafari دعم طريقة createPattern().
注意：الاحتياطية:
تعريف والاستخدام
يكرر هذا النمط العنصر المحدد في الاتجاه المحدد.
يمكن أن يكون العنصر صورة، فيديو أو عنصر آخر <canvas>.
| يمكن استخدام العناصر المكررة لرسم/ملء مستطيلات، دوائر، خطوط وغيرها. | JavaScript Syntax:السياقimage.createPattern( |
|---|
| المعاملات | الوصف | |
|---|---|---|
| image | يحدد العنصر الذي سيتم استخدامه في النمط. العنصر يمكن أن يكون صورة، فيديو أو عنصر آخر <canvas>. | |
| repeat | الافتراضي. يظهر هذا النمط في الاتجاهين الأفقي والعمودي. | |
| repeat-x | يظهر هذا النمط فقط في الاتجاه الأفقي. | |
| repeat-y | يظهر هذا النمط فقط في الاتجاه العمودي. | |
| no-repeat | يظهر هذا النمط مرة واحدة فقط (لا يتكرر). |