HTML canvas createPattern() metodu

Tanım ve Kullanım

createPattern() Belirtilen yönde belirtilen elementi tekrarlar.

Elementler görsel, video veya diğer <canvas> elementleri olabilir.

Tekrarlanan elementler, düzgeç, daire veya çizgiler vb. çizmek veya doldurmak için kullanılabilir.

Örnek

Kullanılan görüntü:

lamp

Görüntüyü dikey ve yatay yönde tekrarlamak için:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

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();

Kişisel olarak deneyin

Gramer

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

Parametre Değeri

Parametre Açıklama
image Kullanılacak resim, çizim veya video elementini belirtir.
repeat Varsayılan. Bu mod hem yatay hem de dikey yönde tekrar eder.
repeat-x Bu mod sadece yatay yönde tekrar eder.
repeat-y Bu mod sadece dikey yönde tekrar eder.
no-repeat Bu mod sadece bir kez gösterilir (tekrar etmez).

Tarayıcı Desteği

Tablo içindeki rakamlar, bu özelliği ilk tam olarak destekleyen tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.